什么是vue

1.构建用户界面

• 用vue往html中填充数据，非常的方便

2.框架

• 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能
• 要学习vue，就是在学习vue框架中规定的用法
• vue的指令、组件（是对UI结构的服用）、路由、vueX、vue组件库
• 将以上内容掌握以后，才有开发vue项目的能力

vue框架的特性（*重要）

• 数据驱动视图

  • 数据的变化会驱动视图自动更新
  • 好处：程序员只管把数据维护好，那么页面结构会被vue自动渲染出来

• 双向数据绑定

  在网页中，form表单负责采集数据，Ajax负责提交数据

  • js数据的变化，会被自动渲染到页面上
  • 页面上表单采集的数据发生变化的时候，会被vue自动获取到，并更新到js数据中

注意：数据驱动视图和双向数据绑定的底层原理是MVVM（Model数据源、View视图、ViewModel就是vue的实例）

vue指令

1.内容渲染指令

1. ​ v-text 指令的缺点：会覆盖元素内容原有的内容
2. {{ }} 插值表达式：在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容
3. v-html 指令的作用：可以把带有标签的字符串，渲染成真正的HTML内容

2.属性绑定指令

注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中

• 在vue中，可以使用v-bind:指令，为元素的属性动态绑定值；

• 简写是英文的:

• 在使用v-bind属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号，例如：

  <div :title="'box' + index">这是一个div</div>
  

3.事件绑定

1. ​ v-on: 简写是@

2. 语法格式为

   <button @click="add"><button>
   
   methods:{
   	add(){
   		// 如果在方法中要修改data中的数据，可以通过this访问到
   		this.count += 1;
   	}
   }
   

3. $event的应用场景：如果默认的事件对象e被覆盖了，则可以手动传递一个$event。例如：

   <button @click="add(3, $event)"></button>
   
   methods: {
   	add(n,e){
   		this.count += 1;
   		console.log(e); // mouseEvent
   	}
   }
   

4. 事件修饰符

   • .prevent

   <a @click.prevent="xxx">链接</a>
   
   • .stop

   <button @click.stop="xxx">按钮</button>
   

4.v-model指令

一般用户只能通过表单元素和服务器进行交互，所以v-model只有在表单元素中使用采用意义，可以完全替代value属性

1. input输入框

   • type="radio"
   • type="checkbox"
   • type="xxx"

2. textarea

3. select

5.条件渲染指令

1.v-show的原理是：动态为元素添加或移除display:none样式，来实现元素的显示和隐藏

• 如果要频繁地切换显示状态，用v-show性能会更好

2.v-if的原理是：每次动态创建或移除元素，实现元素的显示和隐藏

• 如果刚进入页面的时候，某些元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时用v-if会更好

3.在实际开发中， 绝大多数情况，不用考虑性能问题，直接使用v-if就好了