Vue2.0-上篇

Vue官方文档

Hello-World

{ { }}花括号 解析数据

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

<script type="text/javascript">
    //声明一个Vue的实例vm
    var vm=new Vue({
        //el属性，表示将vm实例挂载到 id=app的元素中
        el:'#app',
        //data属性，存放vm实例的数据
        data:{
            msg:'welcome to wuhan'
        }
    });
</script>

数据绑定

v-model、v-once、v-html

双向数据绑定，必须满足视图可以更改，泛指表单元素input， 都需要增加v-model属性。在Vue中，指令以v-开头。

<div class="app">

    <!-- 双向数据绑定-->
    <input type="text"  v-model="msg">

    <!-- 表达式： 三元表达式、 赋值、运算 不支持逻辑if else-->
    {
   {
   msg=='Hello'?200:msg}}   {
   {
   age=100}}  {
   {1+3}}

    <!-- 绑定一次 Vue2.0写法-->
    <div v-once>{
   {
   msg}}</div>

    <!-- 如果绑定的数据是html需要转换成html标签 Vue2.0写法-->
    <div v-html="msg"></div>
</div>

<script type="text/javascript">
    var vm=new Vue({
        el:'.app',
        data:{
            msg:'Hello',
            age:0
        }
    });
</script>

绑定数据arr

v-for

<div id="app">
    <!-- 要重复谁 就在谁身上用v-for-->
    <ul>
        <li