vue.js简介

什么是vue.js

Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。Vue 只关注视图层， 采用自底向上增量开发的设计。Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

vue.js的模板语法

vue.js常见的数据绑定使用{{ … }}(双大括号)插值。

vue.js的模板语法格式举例：

<div id="app">
	{{ value }}
</div>

<script>
	var vm=new Vue({
		el:"app",
		data:{
			value:"vus.js简介"
	});

执行结果

vue.js的一些语句介绍

条件语句

条件判断使用v-if指令：在元素和temple中使用v-if指令。
作用: v-if指令将根据表达式的值为(true或false）来决定是否插入元素。
可以用 v-else 指令给 v-if 添加一个 “else” 块。
v-else-if : 用作 v-if 的 else-if 块。可以链式的多次使用。

注意：v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。

v-show:根据条件来判断执行

<div id="app">
    <h1 v-show="ok">Hello!</h1>   //判断ok的值，若为true，则显示
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})
</script>

循环语句

循环语句使用v-for指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表

<ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
  
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: '张三' },
      { name: '李四' },
      { name: '王五' }
    ]
  }
})

v-for迭代
举例

<div id="app">
  <ul>
    <li v-for="value in object">              //v-for遍历object
    {{ value }}                               //输出value值
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '张三',
      url: 'http://www.baidu.com',
      age: 18
    }
  }
})
</script>

执行结果
张三
http://www.baidu.com
18

v-for支持第二个参数:键名(key)
举例

<div id="app">
  <ul>
    <li v-for="(value,key) in object">              //v-for遍历object
       {{  key }}   ： {{ value }}                           //输出key : value
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '张三',
      url: 'http://www.baidu.com',
      age: 18
    }
  }
})
</script>

执行结果
name:张三
url:http://www.baidu.com
age:18

v-for支持第三个参数:索引(index)
举例

<div id="app">
  <ul>
    <li v-for="(value,key，index) in object">             //v-for遍历object
       {{ index }}   ： {{  key }}   ： {{ value }}       //输出index: key :index
    </li>
  </ul> 
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '张三',
      url: 'http://www.baidu.com',
      age: 18
    }
  }
})
</script>

0：name:张三
1：url:http://www.baidu.com
2：age:18

vue.js的计算属性

vue.js的计算属性关键字：computed。

methods和computed的关系与区别
关系：可以使用 methods 来替代 computed，实现效果上功能是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。

区别：使用 methods ，在重新渲染的时候，函数会重新调用执行。

具体案例将在下篇介绍。

注

以上为本人的理解，如有错误，望指出，及时完善！