• 为啥现在对后端要求这么高?
• 为啥不要求前端会后端呢?

可能是后端人太多了,要求后端需要会前端的框架(vue react angular ),

这不我为了适应市场的需求来系统的学习vue了:

生成一个基础的vue项目

创建vue项目

vue create projectname

创建vite+vue

npm init vite@latest projectname --template vue

package.json

记录项目信息,名称,版本

生产依赖以及开发依赖

package-lock.json

追踪package.json中的依赖版本

项目结构:

node_modules 依赖文件夹

public 资源文件夹

src 源码文件夹

package.json 信息描述文件

vite.config.js vue配置文件

package-lock.json 依赖确定文件

模板语法:

App.vue

<script>
export default{
  data(){
    // 每个绑定仅支持单一表达式,也就是能够被求值的js代码
    return {
      msg:"模板语法",
      key:"键值对",
      ok:true,
      net:"<a href='http://www.baidu.com'>百度一下</a>"
    }
  }
}
</script>

<!-- 模板语法 -->
<template>
<h1>vue基础--文本插值</h1>
<p>{{ msg.split("").reverse().join("") }}</p>
<span>{{ key }}</span>
<p>{{ ok?'yes':'no' }}</p>

<p>{{ net }}</p>
<!-- 使用原始html 需要使用 v-html  -->
<p v-html="net"></p>
</template>

双大括号将会将数据插值解析位文本,而不是html,若想插入html,需要使用v-html

属性绑定

<script>
export default{
  data(){
    // 每个绑定仅支持单一表达式,也就是能够被求值的js代码
    return {
      msg:"模板语法",
      key:"键值对",
      ok:true,
      net:"<a href='http://www.baidu.com'>百度一下</a>",
      dynamicId: "appid",
  dynamicClass:"appclass",
  name:"中国"
    }
  }
}
</script>

<!-- 模板语法 -->
<template>
<h1>vue基础--文本插值</h1>
<p>{{ msg.split("").reverse().join("") }}</p>
<span>{{ key }}</span>
<p>{{ ok?'yes':'no' }}</p>

<p>{{ net }}</p>
<!-- 使用原始html 需要使用 v-html  -->
<p v-html="net"></p>
<!-- 绑定属性使用 v-bind-->
<div v-bind:id="dynamicId" v-bind:class="dynamicClass">{{ name }}</div>
</template>

由于属性绑定很常用,所以可以简写为 :

所以上面属性绑定多个部分可以是下面这个样子的:

<div :id="dynamicId" :class="dynamicClass">{{ appName }}</div>