Vue入门--基础部分

Posted 2020-09-30

一、初识Vue

1. 使用双大括号{{message}}将数据渲染进DOM中。

 

可以使用app.message对渲染后的数据进行修改。

1. Vue常用的指令：

1）v-bind 用来绑定常用属性

   主要用法：直接在html标签上添加v-bind:属性名=”vue实例中的message”

 

2）v-if  条件

   主要用法：直接在html标签上添加v-if=”vue实例中的某个属性名”，这个属性对应的属性值应该是布尔值

 

3）v-for  可以绑定数组的数据来渲染一个列表

   主要用法：实例的data对象中添加一个对象，其中的一项的属性名如todos，它的值是个数据数组，在html中要循环的元素上添加v-for=”任意名如todo in todos”，然后通过双花括号取到todos中每一条数据的某个字段值{{todo.text}}

 

通过app4.todos.push({text: ‘新数据’})新增一项数据

4）v-on 绑定事件，并调用实例中的方法

   主要用法：在vue实例中添加methods对象，里面定义方法如reverseMessage，在html的dom元素直接添加v-on:事件名=”该方法名”

 

注意：方法中的this指代vue实例

5）v-model 主要用于实现表单输入和应用状态之间的双向数据绑定

  主要用法：常用于input元素，添加v-model=”实例中的数据如message”，同时在另个元素中使用双大括号加载该数据{{message}}，从而实现了input框的value值和另个元素数据的同步更新

 

1. 组件化 类似于自定义元素

简言之，如果html页面中某个元素需要重复多遍，就可以把它封装成一个组件加载。

如下例：

           Vue实例的数据中有重复多个的数据json，若想在html页面实现它，就需要考虑下将每一条数据用组件来定义。

1）定义组件的方法：

Vue.component(‘组件元素名’, {

props: [‘todo’],       // 选写。类似于自定义一个属性，属性名叫todo

                  template: ‘标签元素’         // 必写。决定将要采用哪个标签，待第2）完成后将循环后的每一个item数据中的文本加载进来，形成template: ‘<li>{{ todo.text }}</li>‘

         })

2）怎么在html中使用：

         直接将上面的组件元素名当作标签使用，并使用v-for指令循环，v-bind指令绑定组件中定义的那个属性todo，它的值为v-for中的每一项如item，v-bind还可以绑定其他属性，如id.

 

 

二、Vue实例

1. 构造器

每个Vue.js应用都是通过构造函数Vue创建一个Vue的根实例启动的，如：

 var vm = new Vue({  //选项 });

这些选项包括：https://cn.vuejs.org/v2/api/#选项-数据

1）  el

2）  data

3）  methods

4）  filters   过滤器

5）  computed  计算属性

可以对vue实例进行扩展：

 

1. 属性与方法

1）  每个Vue实例都会代理其data对象里所有的属性，如下例，换句话说vm其实就相当于实例中的data，所以能按照json方式取到data中的key和value

 

2）  实例属性和方法  https://cn.vuejs.org/v2/api/#实例属性

都有前缀$，如

 

1. 生命周期

1）  created  在实例被创建之后被调用

2）  mounted updated

3）  destroyed

三、模板语法

1. 使用javascript表达式

 

而且在这种表达式下访问不到用户自定义的变量，只能访问到全局变量的一个白名单，如Math和Date等。

注意：太复杂的表达式会使html模板冗余，所以一般写成计算属性（见第四部分）！

1. 修饰符 .  指出某些指令应该以特殊方式绑定  ps: demo中的用法好像不对！！！

1）.prevent 相当于event.preventDefault() 

1. 过滤器

1）只能在mustache双花括号和v-bind表达式中使用，右管道符“|”指示，用于文本转换，其中message相当于capitalize这个过滤方法的参数。

 

2）  过滤器可以串联

 

3）  过滤器可以传多个参数

 

1. 缩写

常用的两个：v-bind:href=”url”  => :href=”url”   

                             v-on:click=”doSth”  => @click=”doSth”

 

四、计算属性

1. 通过选项computed添加对象，可以有多个值即计算属性，但在一般需求下只添加一个就好了。

参见下例：

我们可以通过vm.reversedMessage获取到计算后的message，当vm.message发生变化时，vm.reversedMessage也会随之改变。

 

1. 与methods对比

计算属性基于自己的依赖进行缓存，只要message没发生变化，多次访问该计算属性就会立即返回之前的计算结果，而不必再次执行函数；

而methods调用总会执行该函数。

1. 与watch对比

都是用来处理某些数据随其他数据的变动而变动的，但尽量不要滥用watch，如果代码是命令式和重复的，先考虑下计算属性computed，可使代码更简洁。

注意：需要深入学习下watch选项。

 

1. 计算setter

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

 

注：setter中的参数newValue即后面设置的vm.fullName—‘Jhon Doe’.

           而且没有上面的get方法，下面设置的fullName根本就不生效。