Vue.js入门（一）：模板语法、计算属性/监听器

1 Vue 设计思想

• 数据驱动应用
• MVVM模式：Vue完成ViewModel功能：
  • 响应式：监听数据变化
  • 模板引擎：解析视图
  • 渲染：将模板转换为html

2 模板语法

2.1 插值文本

Vue.js中最长使用的数据绑定形式，使用双大括号：
{{text}}
v-once, v-html...

2.2 特性

使用v-bind指令绑数据
<h v-bind:title="title">v-bind可以省略</h>

2.3 列表渲染

使用v-for指令基于一个数组渲染列表

<div v-for="item in list" :key="item.id">
            ...
        </div>

2.4 条件渲染

v-if指令

<p v-if="arr.length === 5"></p>
<!-- v-else配合if使用 -->
<p v-else><p>

v-if和v-show的区别
v-show元素总是存在
v-if元素惰性渲染，元素不一定存在

2.5 数据绑定

使用v-model指令在表单元素上实现双向数据绑定，v-model本质是根据控件类型自动选取正确的方法来更新元素的 语法糖。

<!--表单元素绑定-->
<input v-model="course" type = "text" >

2.6 事件绑定

使用 v-on指令监听DOM事件。

<button v-on:click="addCourse">xxx</button>
<button @click="addCourse">xxx</button>

2.7 样式绑定

（1）class指令

<style>
    .style{
        ...
     }
</style>


<div :class="{active: arr.length === 5}"></div>

（2）style指令

<style>
    .style{
        ...
     }
</style>

<!-- 分隔符写法，注意加引号 -->
<div :style="{'background-color' :  arr.length === 5 ? '#ddd' : 'transparent'}"></div>  
<!-- 驼峰写法，不加引号 -->
<div :style="{'backgroundColor': arr.length === 5 ? '#ddd' : 'transparent'}"}"></div>

3 计算属性和监听器

（1）计算属性

<p>
 数量： {{ total }}
</p>
<script scr="vue.js">
           //计算属性，适合多个值影响一个值的情形
            computed: {
                total() {
                    // 计算属性 具有缓存性：如果值没有发生变化，则页面不会重新渲染
                    return this.val + 10
                }
            }
</script>

（2）监听器/侦听器

<p>
 数量： {{ total }}
</p>
<script scr="vue.js">
           //监听器：监听一个值的变化，适合一个值影响多个值的情形
            watch: {
                myArr: {  //变化的值
                    immediate: true,    //立即执行一次
                    // deep: true,  //监听对象属性的变化
                    handler(newValue, oldValue) {
                        this.total = newValue.length + 10  //被影响的值
                    }
                }
            }
</script>