vue基础笔记

什么是vue

1. 构建用户界面
   1. 用 vue 往 html 页面中填充数据，非常的方便
2. 框架
   1. 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务能力
   2. 要学习 vue ，就是学习 vue 框架中规定的用法
   3. vue 的指令、组件 （是对 UI 结构的复用）、路由、 Vuex、vue组件库

vue 的两个特性

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

   在网页中，form 表单负责采取数据， Aiax 负责提交数据

   1. js 数据的变化， 会被自动渲染到页面

   2. 页面表单采集的数据发生变化的时候， 会被 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>|

methons: {
  add(){
  // 如果在方法中修改 data 中的数据，可恶意通过this访问到
  this.count += 1
  }
}

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

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

4. 事件修改符
   • .prevent

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

   • .stop

     <button @click.stop="xxx" >链接</button>
     

5. 按键修饰符

v-model 指令

1. input 输入框
   • type=“radio”
   • type=“checkbox”
   • type=“xxx”
2. textarea
3. select

事件修饰符

阻止默认行为

@click.prenent = "show"   

阻止事件冒泡

@click.stop = "show"

过滤器

过滤器的注意点

1. 要定义到 filters 节点下面，本质是一个函数
2. 在过滤器函数中，一定要有 return 值
3. 在过滤器的形参中，可以获取到“管道符”前面的待处理的那个值
4. 如果全局过滤器和私有过滤器名字一致，此时按照 “就近原则” ，调用的是 “私有过滤器”

watch 侦听器

侦听器的格式

1. 方法格式的侦听器
   • 缺点：无法在刚进入页面的时候，自动触发
   • 缺点：如果侦听的是一个对象，对象中的属性发生变化，不会触发侦听器
2. 对象格式的侦听器
   • 好处：可以通过 immediate 选项，让侦听器自动触发
   • 好处：可以通过 deep 选项，让侦听器深度监听到对象中的每一个属性变化

计算属性

特点：

1. 定义的时候，要内定义为“方法”
2. 在使用计算属性的时候，当普通的属性使用即可

好处：

1. 实现了代码的复用
2. 只要计算属性中以来的数据源变化了，则计算属性就会自动重新求职

axios

axios 是一个专注于发送请求的库