【Vue.js】Vue.js课堂笔记[课堂笔记-二]

课堂笔记 胡成 •
文章标签: Vue.js 课堂笔记
14

Vue.js课堂实例笔记

插值

文本

数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值：

实例代码如下：

 <!-- 普通文字 (innerText) -->
    <!-- 使用“Mustache”语法 (双大括号) 的文本插值Mustache标签将会被替代为对应数据对象上 msg属性的值无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新 -->
    <!-- Mustache 标签 -->
    <!-- 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值  -->
    <div id="app-1">
        <!-- 将“tet”插入到指定位置输出结果：普通文字 -->
        <p>{{tet}}</p>
    </div>
    <script>
        new Vue({
            el: '#app-1',
            data: {
                tet: "普通文字"
            }
        })

    </script>


指令

指令是带有 v- 前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到 DOM 上。

实例代码如下：

<!-- 插入原始html（innerHtml） -->
    <!-- 使用 v-html 指令用于输出 html 代码 -->
    <!-- v-html 将内容以html标签的方式渲染，相当于原生的innerHtml属性 -->
    <!-- 将<strong>标签插入到<span>里面，以html的方式渲染 -->
    <div id="app-2">
        <!-- 输出结果：被插入进来的文本 -->
        <span v-html="msg"></span>
    </div>
    <br>
    <script>
        new Vue({
            el: "#app-2",
            data: {
                msg: "<strong>被插入进来的文本</strong>"
            }
        })
    </script>
    <!-- v-bind 在html 的属性上插值 -->
    <!-- 比如给className动态添加类名、给id动态添加名称，用v-bind可以轻松实现。 -->
    <!-- 对于 disabled、readonly、checked这些boolean类型的属性，如果值为false，这些属性不会出现在标签上。 -->
    <div id="app-3">
        <label>点击变色</label>
        <input type="checkbox" v-model="class1">
        <div v-bind:class="{'class1':class1}">
            会被改变颜色
        </div>
    </div>
    <script>
        new Vue({
            el: "#app-3",
            data: {
                class1: false
            }
        })
    </script>


缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 缩写 -->
    <!-- v-bind 缩写 -->
    <!-- 完整语法 -->
    <!-- <a v-bind:href="url">...</a> -->

    <!-- 缩写 -->
    <!-- <a :href="url">...</a> -->

v-on 缩写

<!-- v-on 缩写 -->
    <!-- 完整语法 -->
    <!-- <a v-on:click="doSomething">...</a> -->

    <!-- 缩写 -->
    <!-- <a @click="doSomething">...</a> -->


计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

实例代码如下：

<!-- 计算属性 -->
    <!-- 带有一定逻辑的属性，在使用时可以当做data属性一样使用 -->
    <!-- 定义在computed上
            计算属性的处理逻辑在方法上
            这个方法必须返回一个有效的表达式
            在使用时，可以直接vm.reversedMessage这是很方便的 -->
    <!-- 实例 -->
    <div id="app-7">
        <p>原始字符串：{{message}}</p>
        <p>计算后字符串：{{reversedMessage}}</p>
    </div>

    <script>
        new Vue({
            el: "#app-7",
            data: {
                message: "ABCDEFG",
                message1: "abcdefg"
            },
            computed: {//计算属性关键词: computed
                reversedMessage: function () {//声明了一个计算属性 reversedMessage 
                    // // `this` 指向 Vue 的实例
                    return this.message.split("").reverse().join("")
                }
            },
            //计算属性关键词: methods
            // 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
            methods: {
                reversedMessage1: function () {
                    return this.message1.split("").reverse().join("")
                }
            }

        })
    </script>

    <!-- 计算属性的 getter和setter -->
    <!-- computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter -->
    <div id="app-8">
        <label>姓：
            <input type="text" v-model="firstName">
        </label>
        <label>名：
            <input type="text" v-model="lastName">
        </label>
        <label>字：
            <input type="text" v-model="fullName">
        </label>
    </div>
    <script>
        var vm = new Vue({
            el: "#app-8",
            data: {
                firstName: "b",
                lastName: "a"
            },
            computed: {
               
                fullName: {
                    // getter
                    get: function () {
                        return this.firstName + " " + this.lastName
                    },
                     // 运行 set 时，setter 会被调用，firstName 和 lastName也会被对应更新。
                    //  setter
                    set: function (newvalue) {   
                        var names = newvalue.split(" ");
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })
    </script>


侦听器

Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化

实例代码如下：

<!-- 侦听器 -->
    <!-- 使用watch监听到某个属性的变化 -->
    <!-- watch属性要和data属性名称一样 -->
    <!-- watch属性传递两个参数 newValue和oldValue -->
    <div id="app-9">
            <input v-model="msg" />
          </div>
          <script>
            var vm = new Vue({
              el: "#app-9",
              data: {
               msg: ''
              },
              watch: {
               msg: function(newValue,oldValue) {
                 console.log(oldValue, newValue);
               }
              }
            });
          </script>


笔记全部代码如下：

<!-- 普通文字 (innerText) -->
    <!-- 使用“Mustache”语法 (双大括号) 的文本插值Mustache标签将会被替代为对应数据对象上 msg属性的值无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新 -->
    <!-- Mustache 标签 -->
    <!-- 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值  -->
    <div id="app-1">
        <!-- 将“tet”插入到指定位置输出结果：普通文字 -->
        <p>{{tet}}</p>
    </div>
    <script>
        new Vue({
            el: '#app-1',
            data: {
                tet: "普通文字"
            }
        })

    </script>
    <!-- 插入原始html（innerHtml） -->
    <!-- 使用 v-html 指令用于输出 html 代码 -->
    <!-- v-html 将内容以html标签的方式渲染，相当于原生的innerHtml属性 -->
    <!-- 将<strong>标签插入到<span>里面，以html的方式渲染 -->
    <div id="app-2">
        <!-- 输出结果：被插入进来的文本 -->
        <span v-html="msg"></span>
    </div>
    <br>
    <script>
        new Vue({
            el: "#app-2",
            data: {
                msg: "<strong>被插入进来的文本</strong>"
            }
        })
    </script>
    <!-- v-bind 在html 的属性上插值 -->
    <!-- 比如给className动态添加类名、给id动态添加名称，用v-bind可以轻松实现。 -->
    <!-- 对于 disabled、readonly、checked这些boolean类型的属性，如果值为false，这些属性不会出现在标签上。 -->
    <div id="app-3">
        <label>点击变色</label>
        <input type="checkbox" v-model="class1">
        <div v-bind:class="{'class1':class1}">
            会被改变颜色
        </div>
    </div>
    <script>
        new Vue({
            el: "#app-3",
            data: {
                class1: false
            }
        })
    </script>
    <!-- 表达式
    Vue.js 还提供了完全的 JavaScript 表达式支持。 -->
    <!-- {{任何有效的js表达式}}，如果不是有效的表示不做任何处理 -->
    <div id="app-4">
        <!-- 输出结果：10 -->
        {{5+5}}
        <!-- 输出结果：YES -->
        <br> {{ok?'YES':'NO'}}
        <!-- 输出结果：GFEDCBA -->
        <br> {{message.split("").reverse().join("")}}
        <!-- div标签 id="list-1" -->
        <div v-bind:id="'list-'+id">有id的文本</div>
    </div>
    <script>
        new Vue({
            el: "#app-4",
            data: {
                ok: true,
                message: "ABCDEFG",
                id: 1
            }
        })
    </script>

    <!-- 指令 -->
    <!-- 指令的参数 -->
    <!-- 在指令名称之后以冒号表示，<a v-bind:href="url">...</a> -->
    <!-- href 是参数，告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定 -->
    <div id="app-5">
        <p>
            <button type="button">
                <a :href="url">链接文本</a>
            </button>
        </p>
    </div>
    <script>
        new Vue({
            el: "#app-5",
            data: {
                url: "https://www.baidu.com/?tn=65081411_oem_dg"
            }
        })
    </script>
    <!-- v-on指令也需要参数 -->
    <!-- <a v-on:click="reverseMessage">...</a>
        监听点击事件 -->
    <div id="app-6">
        <p>{{ message }}</p>
        <button v-on:click="reverseMessage">点击显示</button>
    </div>

    <script>
        new Vue({
            el: '#app-6',
            data: {
                message: 'Runoob!'
            },
            methods: {
                reverseMessage: function () {
                    this.message = this.message.split('').reverse().join('')
                }
            }
        })
    </script>

    <!-- 缩写 -->
    <!-- v-bind 缩写 -->
    <!-- 完整语法 -->
    <!-- <a v-bind:href="url">...</a> -->

    <!-- 缩写 -->
    <!-- <a :href="url">...</a> -->

    <!-- v-on 缩写 -->
    <!-- 完整语法 -->
    <!-- <a v-on:click="doSomething">...</a> -->

    <!-- 缩写 -->
    <!-- <a @click="doSomething">...</a> -->


    <!-- 计算属性 -->
    <!-- 带有一定逻辑的属性，在使用时可以当做data属性一样使用 -->
    <!-- 定义在computed上
            计算属性的处理逻辑在方法上
            这个方法必须返回一个有效的表达式
            在使用时，可以直接vm.reversedMessage这是很方便的 -->
    <!-- 实例 -->
    <div id="app-7">
        <p>原始字符串：{{message}}</p>
        <p>计算后字符串：{{reversedMessage}}</p>
    </div>

    <script>
        new Vue({
            el: "#app-7",
            data: {
                message: "ABCDEFG",
                message1: "abcdefg"
            },
            computed: {//计算属性关键词: computed
                reversedMessage: function () {//声明了一个计算属性 reversedMessage 
                    // // `this` 指向 Vue 的实例
                    return this.message.split("").reverse().join("")
                }
            },
            //计算属性关键词: methods
            // 我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行
            methods: {
                reversedMessage1: function () {
                    return this.message1.split("").reverse().join("")
                }
            }

        })
    </script>

    <!-- 计算属性的 getter和setter -->
    <!-- computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter -->
    <div id="app-8">
        <label>姓：
            <input type="text" v-model="firstName">
        </label>
        <label>名：
            <input type="text" v-model="lastName">
        </label>
        <label>字：
            <input type="text" v-model="fullName">
        </label>
    </div>
    <script>
        var vm = new Vue({
            el: "#app-8",
            data: {
                firstName: "b",
                lastName: "a"
            },
            computed: {
               
                fullName: {
                    // getter
                    get: function () {
                        return this.firstName + " " + this.lastName
                    },
                     // 运行 set 时，setter 会被调用，firstName 和 lastName也会被对应更新。
                    //  setter
                    set: function (newvalue) {   
                        var names = newvalue.split(" ");
                        this.firstName = names[0];
                        this.lastName = names[names.length - 1]
                    }
                }
            }
        })
    </script>
    <!-- 侦听器 -->
    <!-- 使用watch监听到某个属性的变化 -->
    <!-- watch属性要和data属性名称一样 -->
    <!-- watch属性传递两个参数 newValue和oldValue -->
    <div id="app-9">
            <input v-model="msg" />
          </div>
          <script>
            var vm = new Vue({
              el: "#app-9",
              data: {
               msg: ''
              },
              watch: {
               msg: function(newValue,oldValue) {
                 console.log(oldValue, newValue);
               }
              }
            });
          </script>


——来自胡小哥原创Vue.js课堂笔记（持续更新中...）

({{handupNumber}}) ({{favoriteNumber}})
还能输出{{restrictNumber}}个字符  

  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :