Vue入门笔记

Demo01 Hello World

<div id='app'>
   <p>{{message}}</p>
</div>
<script>
   new Vue({
    el:'#app',
    data:{message:'Hello World !'}
   });
</script>

使用Vue的过程就是定义MVVM各个组成部分的过程的过程。

定义View
定义Model
创建一个Vue实例或”ViewModel”，它用于连接View和Model
在创建Vue实例时，需要传入一个选项对象，选项对象可以包含数据、挂载元素、方法、模生命周期钩子等等。

在这个示例中，选项对象的el属性指向View，el: ‘#app’表示该Vue实例将挂载到

…

这个元素；data属性指向Model，data: exampleData表示我们的Model是exampleData对象。
Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用一对大括号语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出”Hello World!”。

Demo02 V-modul指令实现数据双向绑定

<div id='app'>
   <input v-model='message'/>
   <p>{{message}}</p>
</div> 
<script>
    new Vue({
       el:'#app',
       data:{message:'hello'}
    });
</script>

将message绑定到文本框，当更改文本框的值时，

中的内容也会被更新。

Demo03 v-if指令

<div id='app'>
    <h2>hello world</h2>
    <h2 v-if="yes">YES</h2>
    <h2 v-if="no">NO</h2>
    <h2 v-if="age>=28">年龄：{{age}}</h2>
    <h2 v-if="gender">性别：</h2>
    <h2 v-if="name.indexOf('gao') !== -1">姓名:{{name}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            yes:true,
            no:false,
            age:30,
            gender:false,
            name:'gaoce'
        }
    });
</script>

v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，语法如下：
v-if=”expression”
expression返回boolean表达式，表达式可以是boolean属性即true或false，也可以是返回boolean的运算式

v-show指令

<div id='app'>
    <h2>hello world</h2>
    <h2 v-show="yes">YES</h2>
    <h2 v-show="no">NO</h2>
    <h2 v-show="age>=28">年龄：{{age}}</h2>
    <h2 v-show="gender">性别：</h2>
    <h2 v-show="name.indexOf('gao') !== -1">姓名:{{name}}</h2>
</div>
<script>
    new Vue({
        el:'#app',
        data:{
            yes:true,
            no:false,
            age:30,
            gender:false,
            name:'gaoce'
        }
    });
</script>

v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。（display：none）

v-for指令

<div id='app'>
<table>
    <thead>
        <tr>
            <td>userName</td>
            <td>age</td>
            <td>gender</td>
        </tr>
        <tbody>
        <tr v-for="student in students">
            <td>{{student.userName}}</td>
            <td>{{student.age}}</td>
            <td>{{student.gender}}</td>
        </tr>
    </tbody>
</thead>
</table>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [{
                userName: '张三',
                age: 21,
                gender: '女'
            }, {
                userName: '李四',
                age: 21,
                gender: '男'
            }, {
                userName: '王五',
                age: 23,
                gender: '女'
            }]
        }
    });
</script>

v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
v-for=” site in sites ”
sites是源数据数组，site是数组元素迭代的别名。

Demo06 Computed和Methods

<div id='app'>
    <p>{{message}}</p>
    <p>computed计算反转字符串{{reverseMessage}}</p>
    <p>使用方法计算反转字符串{{reverseMessage2() }}</p>
</div>
<script>
new Vue({
    el:'#app',
    data:{
        message:'hello!'
    },
    computed:{
        reverseMessage:function (){
         return this.message.split("").reverse().join("")
        }
    },
    methods:{
        reverseMessage2:function(){
         return this.message.split("").reverse().join("")
        }
    }
});
</script>

Computed和Methods效果上两个是一样的，但Computed有依赖缓存。当相关依赖发生改变时才会重新取值，而使用methods时，在重新渲染的时候，函数总会重新调用。