分类 Web 下的文章

Vue2

响应式数据与插值表达式

插值表达式

使用插值表达式{{}}可以显示对应单一内容:

<p> {{x}} </p>                //显示变量或属性;
<p> {{x+1}} </p>              //显示单行表达式;
<p> {{X?'true':'false'}} </p> //显示三元计算式;
<p> {{fun()}} </p>            //显示方法返回值;

响应式数据

数据变化时,会自动更新对应方法、属性、插值表达式。

变量

方法

计算属性

  • 属性
    计算属性调用时作为变量调用，无需()。
  • 缓存性
    计算属性具有缓存性，相关的响应式数据变化时，针对多次调用只会计算一次。

侦听器

通过设置与属性同名监听方法，可以在属性变化时，做更多操作。

指令

  • 内容指令

    • v-text
    • v-html

  • 渲染指令

    • v-for
      for (item,name,index) in obj
      for item in arr
    • v-if
    • v-show
  • 属性指令
    可用v-bind:一般属性 绑定响应式数据到html属性，如v-bind:title, 可简写为:title;
  • 事件指令
    可用v-on:一般事件名 绑定响应式数据到html事件，如v-on:click, 可简写为@click;

  • 表单指令
    可使用v-model绑定响应式数据到表单，如：

     <input type="text" v-model="inputVale"/>
 <p v-text="inputValue"></p>

  • 修饰符
    可使用修饰符将Dom数据处理后再传到Vue变量，如：

     <input type="text" v-model.trim="inputValue">

    则可将输入数据去空格赋值。

<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body >

</body>
</html>

<script>
const app = new Vue({
    el:'#app',
    data(){
        return {
            title:'text'
        }
    }，

});
</script>

- 阅读剩余部分 -