Vue.js入门基础知识

什么是Vue.js

Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是Vue 的核心库只关注视图层。
Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js是一种MVVM框架(Model-View-ViewModel),其中html是view层，js是model层，通过vue.js（使用v-model这个指令）完成中间的底层逻辑，实现绑定的效果。改变其中的任何一层，另外一层都会改变；

Vue.js基本语法

首先建立一个.html文件
然后引入Vue.js文件：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

然后创建一个vue的根实例

<div id="app">        <h1>{{message}}</h1>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'Hello Vue'            }        })    </script>

使用Vue构造函数创建一个Vue实例，然后通过Vue实例的el接口实现与HTML元素的挂载，el指element，内容指向页面元素的id

指令

1、v-text
v-text的作用与{{ }}的作用其实是一样的

<div id="app">        <h1 v-text="message"></h1>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'Hello Vue'            }        })    </script>

同样的页面会显示Hello Vue
2、v-html
v-html与操作DOM时所用的.innerHTML方法时类似的，

<div id="app">        <h1 v-html="message"></h1>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'Hello Vuejs<i>(I am learning)</i>'            }        })    </script>

页面输出：说明 i 标签起作用

如果把v-html换成v-text，则会得到：

由此可以知道v-text和v-html的区别：
v-text：会将文本全部输出
v-html：会将文本编译后输出
3、v-show

<div id="app">        <!-- <h1>{{message}}</h1> -->        <h1 v-html="message"></h1>        <p v-show="viewed">you have see this sentence</p>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'Hello Vuejs<i>(I am learning)</i>',                viewed:true            }        })

v-show会判断值是true还是false，如果是true的话，显示内容
如果是false的话，隐藏，但元素还是存在在页面中只是display：none了而已
如上面的例子，viewed:true的话，打开控制台，

现在将viewed改为false，刷新页面

4、v-if
先来看看v-if和v-show的区别
把上面例子的v-show改为v-if

<div id="app">        <!-- <h1>{{message}}</h1> -->        <h1 v-html="message"></h1>        <p v-if="viewed">you have see this sentence</p>    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                message:'Hello Vuejs<i>(I am learning)</i>',                viewed:false            }        })    </script>

当viewed：true时结果和v-show的一样
当viewed设置为false时，刷新页面，查看控制台

你会发现元素不存在！
这就是v-if和v-show的区别。
v-if 是“真正的”条件渲染，如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下， v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

v-if可以与v-else结合使用，跟我们平时用的if-else语句块是一样的
5、v-once
顾名思义，拥有这个指令的元素只会被渲染一次，若给它重新赋值也不会有效果。
6、v-bind
绑定属性，如v-bind:title,v-bind:href

<div id="app">        <img v-bind:src="url" v-bind:title="message">    </div>    <script type="text/javascript">        var app=new Vue({            el:'#app',            data:{                url:'http://cn.vuejs.org/images/logo.png',                message:'vue logo'            }        })    </script>

这样就绑定了img的src属性，鼠标悬浮在照片在时有提示信息
绑定的好处就是在Model层做修改后会实时的更新到View层，你会发现，v-bind是单向的绑定数据，从View层就不能改变Model层的数据，所以，v-model就出现了。
7、v-model
通过v-model指令可以实现数据的双向绑定，即View层的数据变化可以直接改变Model层的数据，而Model层的数据改变也可以直接反映在View层。
下面是几个例子：

<div id="example-1">            <input v-model="message" placeholder="edit me">            <p>Message is: {{ message }}</p>    </div>    <!-- 多行文本 -->    <div id="example-2">        <span>Mutiline message is:</span>        <p>{{ message }}</p>        <br>        <textarea v-model="message" placeholder="add multiple lines"></textarea>    </div>    <!-- 复选框 -->    <div id="example-3">        <input type="checkbox" id="checkbox" v-model="checked">        <label for="checkbox">{{ checked }}</label>    </div>    <!-- 多个勾选框，绑定同一按钮 -->    <div id="example-4">        <input type="checkbox" id="jack" value="Jack" v-model="checkedname">        <label for="jack">Jack</label>        <input type="checkbox" id="john" value="John" v-model="checkedname">        <label for="john">John</label>        <input type="checkbox" id="mike" value="Mike" v-model="checkedname">        <label for="mike">Mike</label>        <span>Checked names:{{ checkedname }}</span>    </div>    <!-- 单选按钮 -->    <div id="example-5">        <input type="radio" id="one" value="One" v-model="picked">        <label for="one">One</label>        <input type="radio" id="two" value="Two" v-model="picked">        <label for="two">Two</label>        <span>picked:{{picked}}</span>    </div>    <!-- 单选列表 -->    <div id="example-6">        <select v-model="selected">            <option>A</option>            <option>B</option>            <option>C</option>        </select>        <span>Selected：{{selected}}</span>    </div>    <!-- 选项动态生成，用v-for渲染 -->    <div id="example-7">        <select v-model="selected">            <option v-for="option in options" v-bind:value="option.value">{{ option.text}}</option>        </select>        <span>Selected：{{selected}}</span>    </div>    <script type="text/javascript">        var example7=new Vue({            el:'#example-7',            data:{                selected:'A',                options:[                    {text:'one',value:'A'},                    {text:'two',value:'B'},                    {text:'three',value:'C'}                ]            }        })        var example1=new Vue({            el:'#example-1',            data:{                message:''            }        })        var example2=new Vue({            el:'#example-2',            data:{                message:''            }        })        var example3=new Vue({            el:'#example-3',            data:{                checked:false            }        })        var example4=new Vue({            el:'#example-4',            data:{                checkedname:[]            }        })        var example5=new Vue({            el:'#example-5',            data:{                picked:''            }        })        var example6=new Vue({            el:'#example-6',            data:{                selected:null            }        })    </script>

从前面的例子可以知道，只要有数据变动，就会立即更新。但是有时候，比如说搜索的时候，我们希望在输入整个搜索条目的时候再进行搜索，这时候就需要到watch了。
7、watch
watch不是指令，watch有观察的意思再里面，观察数据的变化，做出反应