vue的本地应用

摘要：不同于早期原生js基于dom来获取并操纵页面元素的方法，在vue中使用以 v- 开头的特殊语法来实现：v-text ， v-html， v-on， v-show， v-if， v-on 等一系列vue指令。

1.  内容绑定，事件绑定

v-text：由其绑定的元素中的所有内容都会被绑定的数据给替换掉，若不想被替换可用{{ message }}插值表达式的形式写入；

v-html：同上为内容绑定指令，但可被html元素替换。如;

<p v-html="message"></p>

data:{
message:"<a href='https://cn.vuejs.org/v2/guide/'>this is a url</a>"

}

v-on：作用为元素绑定事件，可被@替代，如：

<input type="button" name="" id="" value="点d" @dblclick="abolt()" />

 

2. 显示切换，属性绑定

v-show：可设置元素的display样式，根据表达值的真假来切换元素的隐藏和显示；

v-if：也可用来隐藏或显示元素，但其原理与v-show不同，v-if是通过操纵dom元素来控制显示和隐藏，而v-show设置的是元素的display样式；

当需要频繁切换元素隐藏和显示时，出于性能的考虑最好使用v-show

v-bind：可用来设置元素的属性（比如:src，class，title）；也可以通过控制class类名来控制元素的样式设置，如下：

<img :src="imgsrc" v-show="true" :title="imgtitle" 
:class="imgactive?'active':''" @click="active()">
<img :src="imgsrc" v-show="true" :title="imgtitle"
:class="{active:imgactive}" @click="active()">

先设置变量imgactive的值为false

 

当单机图片时改变imgactive的值为true，表达式中就会返回类名active，这时设置的css样式可显示出来：

3. 列表循环，表单元素绑定

 v-for：需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

迭代数组

<ol>
    <li v-for="item in arr">
      {{ item.name }}
    </li>
  </ol>

迭代对象

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

迭代整数

  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>

 v-model：实现双向绑定（把Model绑定到View的同时也将View绑定到Model上，这样就既可以通过更新Model来实现View的自动更新，也可以通过更新View来实现Model数据的更新。所以，当我们用JavaScript代码更新Model时，View就会自动更新，反之，如果用户更新了View，Model的数据也自动被更新了。）