初步了解VUE

VUE中文官网:https://cn.vuejs.org/

VUE安装教程:https://cn.vuejs.org/v2/guide/installation.html
注:Vue.js 支持所有兼容 ECMAScript 5 的浏览器(Vue.js 不支持 IE8 及其以下版本)。

初步了解VUE

模板语法

每个 Vue 应用都是一个或多个 Vue 实例:

  var vm = new Vue({})

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统:
html:

  <div id="demo">
  {{text}}
</div>

js:

  var vm= new Vue({
  el: '#demo',
  data: {
    text: 'Cmstop2017'
  }
})

QQ图片20171201161943.png

插值

1、文本:数据绑定最常见的形式就是使用双大括号‘{{}}’ 的文本插值。

  <span>数据: {{ message }}</span>

2、原始 HTML:双大括号会将数据解释为普通文本, v-html可以输出真正的 HTML。

  <span> 双大括号输出: {{ rawHtml }}</span><br/>
<span>v-html 输出: <span v-html="rawHtml"></span></span>

QQ图片20171201161010.png

3、特性:要给元素添加属性可以用 v-bind 指令。
例如:

  <div v-bind:id="head"></div>

4、JavaScript 表达式:在数据绑定中VUE也支持使用 JavaScript 表达式。
例如:

 <div v-bind:id="'list-' + id"></div>
<div>{{ number + 1 }}</div>
<div>{{  data? data : 0 }}</div>
指令

指令 (Directives) 是带有 v- 前缀的特殊属性。
指令的职责是,当表达式的值改变时,将其产生的连带影响,响应式地作用于 DOM。同angular.js的ng-。

1、指令能够接收参数。
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。如v-bind 指令和v-on 指令。
v-bind 指令可以用于响应式地更新 HTML 属性,且有特定的缩写。

  <a v-bind:href="url"></a>

可缩写为:

  <a :href="url"></a>

v-on 指令用于监听 DOM 事件,且有特定的缩写。

  <a v-on:click="doSomething"></a>

可缩写为:

  <a @click="doSomething"></a>

2、指令能够添加修饰符。
修饰符 (Modifiers) 是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定。
如:

  <form v-on:submit.prevent="onSubmit"></form>

v-on 指令对于触发的事件调用 event.preventDefault()

常见指令用法

v-if

v-if指令实现元素或者模板是否渲染,也可以用v-else 添加一个“else 块”。
例如:

  <span v-if="ok">显示</span>
<span v-else>隐藏</span>

如果想切换多个元素可以把一个 <template>元素当做不可见的包裹元素,并在上面使用 v-if

  <template v-if="show">
  <h1>title</h1>
  <span >cmstop1</span >
  <span >cmstop12</span >
</template>

VUE2.1.0 新增了v-else-if,充当 v-if 的“else-if 块”,可以连续使用:

<div v-if="type === 'a'">A</div>
<div v-else-if="type === 'b'"> B</div>
<div v-else-if="type === 'c'">C</div>
<div v-else>D</div>

v-show

v-show指令用于根据条件展示元素,与v-if的用法大致一样,但是v-show 不支持 <template> 元素,也不支持 v-else

v-ifv-show
v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建,如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。而带有 v-show 的元素不管初始条件是什么,元素总是会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。
所以如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if 较好。

v-for

使用v-for指令可以根据一组数组的选项列表进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名。

<ul id="list1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
 var list1= new Vue({
  el: '#list1',
  data: {
    items: [
      { id: 0, text: '水果' },
      { id: 1, text: '土豆' },
      { id: 2, text: '都是好吃的' }
    ]
  }
}) 

QQ图片20171201180032.png

v-for还支持一个可选的第二个参数为当前项的索引。

<ul id="list1">
  <li v-for="(item, index) in items">
    {{ item.message }} - {{ index }}
  </li>
</ul>

QQ图片20171201180446.png

也可以用 of 替代 in 作为分隔符:

 <div v-for="item of items"></div> 

v-for不仅可以循环数组,还可以通过一个对象的属性来迭代。

  <ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
 new Vue({
  el: '#v-for-object',
  data: {
    object: {
      firstName: 'John',
      lastName: 'Doe',
      age: 30
    }
  }
}) 

QQ图片20171204100100.png

而且可以提供第二个参数为键名、三个参数为索引:

 <div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div> 

QQ图片20171204100300.png
注:在遍历对象时,是按 Object.keys() 的结果遍历,但是不能保证它的结果在不同的 JavaScript 引擎下是一致的。

key

当 Vue.js 用v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。这个类似 Vue 1.x 的 track-by="$index"
这个默认的模式是高效的,但是只适用于不依赖子组件状态或临时 DOM 状态 (例如:表单输入值) 的列表渲染输出。
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,需要为每项提供一个唯一 key 属性。理想的key 值是每项都有的且唯一的 id。这个特殊的属性相当于 Vue 1.x 的 track-by,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值:

 <div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div> 

建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
key是 Vue 识别节点的一个通用机制,key 并不与 v-for 特别关联。

v-for注意事项

由于 JavaScript 的限制, Vue 不能检测以下变动的数组
1.当利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue
2.当修改数组的长度时,例如:vm.items.length = newLength
为了解决第一类问题,以下两种方式都可以实现和 vm.items[indexOfItem] = newValue相同的效果,同时也将触发状态更新:

  //Vue.set
Vue.set(example1.items, indexOfItem, newValue)
//Array.prototype.splice
example1.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题,可以使用 splice

  example1.items.splice(newLength)

.
还是由于 JavaScript 的限制, Vue 不能检测对象属性的添加或删除 .
对于已经创建的实例,Vue 不能动态添加根级别的响应式属性。但是,可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

 var vm = new Vue({
  data: {
    user:{
        a:1
     }
  }
})
// `vm.user.a` 现在是响应式的
vm.user.b = 2
// `vm.user.b` 不是响应式的 
 Vue.set(vm.user, 'b', 2) 

你还可以使用 vm.$set 实例方法,它只是全局 Vue.set 的别名:

 this.$set((vm.user, 'b', 2) 

.
.
.

未完待续…

较为完整的demo正在开发中

阅读更多

没有更多推荐了,返回首页