Vue实例与模板语法

发表于 | 分类于 | 阅读次数:

Vue实例

新建一个Vue实例

  • 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始的：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    let data = {a: 1}
    let vm = new Vue({
      //数据实例一
        data: data
      //数据实例二
      	data:{
        	newTodoText: '',
     	 	visitCount: 0,
      		hideCompletedTodos: false,
      		todos: [],
      		error: null
    	}
    })

    ​

数据与方法

  • 当一个Vue实例被创建时，它向Vue的响应式系统中加入了新建对象的data对象中能找到的所有的属性。当这些属性的值发生改变时，视图将会产生响应，即匹配更新为新的值。（上一篇介绍中写了个小型的响应demo）
  • 若数据单一的时候可直接使用数据实例一。但若数据多或者某些数据需要某个操作触发才有效，可先定义并且赋初值，如数据实例二。
  • Vue实例还暴露了一些有用的实例属性与方法，他们都有前缀$，以便于与用户定义的属性区分开来。例如：
    • vm.$data === data//=>true
    • vm.$sl === document.getElementById('example')//=>true
    • vm.$watch('a' , function(newValue , oldValue){})//监听变量的变化，以便于dom的响应。

模板语法

  • Vue.js使用了基于HTML的模板语法，允许开发者声明式地将DOM绑定至底层Vue实例的数据。所有的Vue.js的模板都是合法的HTML，所以都能被遵循规范的浏览器和HTML解析器解析。在底层的实现上，Vue将模板编译成虚拟DOM渲染函数。结合响应系统，在应用状态改变时，Vue能够智能的计算出重新渲染组件的最小代价并应用到DOM操作上。

插值

文本

  • 数据绑定最常见的形式是使用“Mustache”语法（双大括号）的文本插值：
    • <span> Message: </span>类似angular的双向绑定，只要一边发生改变，另一边也会做出相应的变化。

原始HTML

  • 双大括号会将数据解释为普通文本，而非HTML代码。为了输出真正的HTML，需要使用v-html指令：
    • <div v-html="realHTML"></div>这个div的内容将会被替换成为属性值realHTML，直接作为html会忽略解析属性值中的数据绑定。注意，不能使用v-html来符合局部模板，因为vue不是基于字符串的模板引擎。反之，对于用户UI，组件更适合作为可重用和可组合的基本单位 。

特性

  • Mustache语法不能作用在HTML特性上，遇到这种情况应该使用v-bind指令：
    • <div v-bind:id="dynamicId"></div>若绑定的是bool类型的值，则结果为控制特性的使用/消失。

使用javascripts表达式

  • 对于所有的数据绑定，Vue.js都提供了完全的JavaScript表达式支持，正确的表达式会在所属的Vue实例的数据作用域下作为js被解析。但是有个限制，就是每个绑定都只能包含单个表达式。

指令（Directives）

  • 指令是带有v-前缀的特殊属性。指令属性的值预期是单个js表达式（v-for除外）。指令的职责是当表达式的值改变时，将其产生的连带影响，响应式地作用与DOM。回顾上一篇的例子：<p v-if="seen">here</p>。这里，根据seen的值为true/false来插入/移除<p>元素

指令的缩写

  • v-bind缩写

  • 1
    2
    3
    4
    5
    <!--完整语法-->
    <a v-bind:href="url"></a>

    <!-- 缩写 -->
    <a :href="url"></a>

  • v-on缩写

    ​

    1
    2
    3
    4
    5
    <!--完整语法-->
    <a v-on:click="dosomething"></a>

    <!-- 缩写 -->
    <a @click="dosomething"></a>

  • 再来一遍，文档！文档！文档！左转vue.js