VUE的简单小结

文本语法

• 数据绑定最常见的形式就是使用{{}}语法(双大括号)

<span> {{message}}</span>

• 也可以使用v-text

<span v-text="message"><span>

html文本

• 双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
       <div v-html="rawMsg"></div>
   </div>
   <script type="text/javascript">
       var app=new Vue({
           el:'#app',
           data:{
               message:'hello Vue!',
               rawMsg:'<h1>你好vue</h1>'
           }
       })
   </script>

模板语法-属性

给html标签绑定一个属性值应该使用 v-bind：属性名称
一下代码给h1绑定一个新的id和title属性

<div id="app">
  <h1 v-bind:id="dyId" v-bind:title="dyTitle">我是一行快乐的标题</h1>
</div>
 <script type="text/javascript">
     var app=new Vue({
         el:'#app',
         data:{
             dyId:'best',
             dyTitle:'看见我的人一生平安'
         }
     })
 </script>

文本渲染结果是：

<h1 id="best" title="看见我的人一生平安">我是一行快乐的标题</h1>

属性绑定也可以这样直接简写：

<h1 :id="dyId" :title="dyTitle">我是一行快乐的标题</h1>

条件指令 v-if

指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 真 值的时候被渲染。

<div v-if="true">你好，刘</div>

也可以用v-else添加一个"else"快:

<div  v-else="">请登录后皂</div>

<div id="app">
    <div v-if="isLogin">你好：木木</div>
    <div v-else="">请登录后操作</div>
</div>
<script type="text/javascript">
    var app=new Vue({
        el:'#app',
        data:{
           true:false
        }
    })
</script>

v-show指令

另一个用于根据条件展示元素的选项是v-show指令

<h1 v-show="true">Hello!</h1>

v-show 只是调整css中的display属性 ，DOM已经加载，只是css控制没有显示出来。
v-if：判断是否加载 ，可以减轻服务器的压力 ，在需要的时候加载。
v-show：调整css display属性 ，可以是客户端操作更加流畅

列表渲染

<li v-for="item in items">
   {{item}}
</li>
var app=new Vue({
  el:'#app',
  data:{
      items:['angular','react','vue',jquery]
  }
})

对象循环输出

<li v-for="item in items">
   {{item.name}}--{{item.age}}
</li>

var app=new Vue({
  el:'#app',
  data:{
      items:[
         {name:"mumu", age:18},
         {name:"zql", age:22},
         {name:"曾庆林", age:28},
      ]
  }
})

key

为了为Vue 一个提示，以便它能跟中每个节点的身份，从而重用和重新排序现有的元素，你需要为每个选项提供一个唯一的key属性。理想的key值是每项都有的唯一的id。

<li v-for="(item,index) in items" :key="index">
   {{item}}
</li>

var app=new Vue({
  el:'#app',
  data:{
      items:['mumu','曾庆林','木木','mumu']
  }
})

如果不绑定tip 重复的"mumu"在列表循环会报错监听事件
可以用v-on 指令监听DOM事件，并在触发时运行一些javaScript代码。

<div id="app">
<button v-on:click="counter += 1">加 1</button>
<p>按钮被点击了 {{ counter }}次.</p>
</div>

var example1 = new Vue({
el: '#ap',
  data: {
    counter: 0
  }
})

计算属性

模板没的表达式非常便利，但是设计他们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="examole">
{{msg.split("").reverse().join('')}}
</div>

这里是想要实现字符串的翻转。当你在模板中多次引用此处的翻转字符串时，就会更加难以处理。
当你需要从现有的数组中得到更新的数据这个时候你就需要计算computed

<div id="example">
  <p>原来的信息: "{{ msg }}"</p>
  <p>计算翻转的信息: "{{ rmsg }}"</p>
</div>

var vm=new Vue({
el:"#app",
data:{
msg:"Hello"
},
computed:{
rmsg:function(){
return this.msg,split('').reverse().join('')
}
}

})

结果：
原来的信息: “hello}”

计算翻转的信息: “olleh”