Vue基础语法(值相关)

作者: kevin5979 | 来源:发表于2019-12-12 17:36 被阅读0次

Mustache语法

基本用法演练：

    <div id="app">
        <h2>{{message}}</h2>
        <h3>{{message + message}}</h3>
        <div>标价为：{{price * 2}}</div>
        <div>取数组下标值：{{arr[2]}}</div>
        <div>算数运算：{{arr[2] + arr[3] * arr[4]}}</div>
        <div>直接打印数组：{{arr}}</div>
        <ul>
            <li>姓名：{{obj.name}}</li>
            <li>年龄：{{obj.age}}</li>
            <li>身高：{{obj.high}}</li>
            <li>直接打印对象：{{obj}}</li>
        </ul>
        <div>执行函数：{{fn(3)}}</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message: "我是标题",
                price: 66,
                arr: [1, 2, 3, 4, 5],
                obj: {
                    name: "Kevin",
                    age: 18,
                    high: "1.88"
                },
                fn: num => num ** 3
            }
        })
    </script>

Mustache语法

Mustache语法总结：
1.基本模式 {{变量或函数}}，注意：Mustache语法插入的数据是响应式的
2.使用的变量或函数必须在 data 中定义，否则视为正常的字符串处理
3.{{变量或函数}} 必须插入到标签中
3.可以进行直接的算数运算，或字符串拼接，或者是表达式
4.不可以直接打印数组或对象

v-once语法

基本用法演练：

    <div id="app">
        <div v-once>{{message}}</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                message:"Hello VueJs"
            }
        })
     </script>

v-once语法

v-once语法总结：
1.该指令表示元素和组件只渲染一次，不会随着数据的改变而改变。(解除响应式)
2.v-once写在标签内部
3.该指令后面不需要跟任何表达式

v-html语法

基本用法演练：

    <div id="app">
        <div>{{link}}</div>
        <div v-html = "link"></div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                link: "<a href='https://www.baidu.com'>百度一下</a>"
            }
        })
    </script>

v-html语法

v-html语法总结：
1.v-html指令写在标签内部
2.v-html后面往往会跟上一个字符串
3.v-html会将字符串的html解析出来并且进行渲染

v-text语法和v-pre语法

基本用法演练：

    <div id="app">
        <div>{{link}}</div>
        <div v-text = "link"></div>        
        <div v-pre>{{link}}</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                link: "<a href='https://www.baidu.com'>百度一下</a>"
            }
        })
    </script>

v-text语法和v-pre语法

v-text语法总结：
1.v-text 语法和v-html一样的书写在标签内部，但是不能解析html语法，其作用与Mustache一样
2.v-pre 语法和 v-once 一样，后面不需要加东西，其作用是取消Mustache的作用

v-bind语法

基本用法演练：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .show{
            display: none;
        }
        .active{
            color: red;
        }
        .showColor{
            color: aqua;
        }
        .fontSize{
            font-size: 18px;
        }
        .line{
            display: block;
        }
    </style>
</head>

<body>
    <div id="app">
        <a v-bind:href="link">百度一下</a>
        <img :src="logo" alt=""><br>
        ==================================绑定Class====================================
        <h2 :class="{'show': isShow}">isShow</h2>
        <h2 :class="{'active': isActive}" class="fontSize">isActive + fontSize</h2>
        <span :class="{'active': isActive, 'line': isLine}">isActive</span> isLine
        <h2 :class="['showColor','fontSize']">showColor + fontSize</h2>
        ==================================绑定Style====================================
        <div :style="{color: setColor, fontSize: size + 'px'}">setColor + size</div>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                link: "https://www.baidu.com",
                logo: "https://www.baidu.com/img/bd_logo1.png",
                isShow: false,
                isActive:true,
                isLine:true,
                setColor:"blue",
                size:50,
            }
        })
    </script>
</body>

</html>

v-bind语法

v-bind语法总结：
1.主要作用：
动态绑定某些属性：如绑定标签内的href属性，src属性
动态绑定class和style：决定标签是否添加某些样式，绑定的class和style与原来的class、style不冲突，并且会合并属性值
2.v-bind缩写： v-bind: 可缩写为：
3.可以用对象和数组两种方式绑定class和style

例子：Mustache展示爱好

    <div id="app">
        <h2>我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                loves:["篮球","听音乐","喝咖啡","棒棒糖","阅读","写代码"]
            }
        })
    </script>

我们发现这样写的话，html会变得很臃肿，不利于阅读和修改
于是，有另一种方法可以解决这个问题，使用computed

计算属性（computed）

基本用法演练：

    <div id="app">
        <h2>我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}</h2>
        <h2>我的爱好: {{myLoves}}</h2>
        <strong>结算总价:￥{{totalPrice}} 元</strong>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                loves: ["篮球", "听音乐", "喝咖啡", "棒棒糖", "阅读", "写代码"],
                shoppingCart: [
                    { name: "离散数学", price: 30.00, count: 2 },
                    { name: "数据结构与算法", price: 45.00, count: 3 },
                    { name: "JavaScript权威指南", price: 139.00, count: 2 },
                    { name: "概率论与数理统计", price: 35.00, count: 1 }
                ]
            },
            computed: {
                myLoves() {
                    return this.loves[1] + " " + this.loves[3] + " " + this.loves[4] + " " + this.loves[5]
                },
                totalPrice(){
                    return this.shoppingCart.reduce((total,book)=>{
                        return total + book.price * book.count
                    },0)
                }
            }
        })
    </script>

computed语法

computed语法总结：
1.作用：对数据进行一些转化后再显示，或者需要将多个数据结合起来进行显示

计算属性(computed)的setter和getter

      totalPrice: {
           get() {
              alert("调用了get方法")
                return this.shoppingCart.reduce((total, book) => {
                return total + book.price * book.count
              },0)
            },
            set(){
              alert("调用了set方法")
            }
      }

computed的setter和getter

将totalPrice改为上述代码，证明页面上调用totalPrice方法，就是调用了totalPrice的get函数

注意： computed中的方法具有缓存特性：即页面上多次调用totalPricef方法，get函数只会执行一次，这样就优化了性能，提升网页运行速度（methods 没有缓存特性）

事件监听（v-on指令）

基本用法演练：

    <div id="app">
        鼠标点击次数：<span>{{count}}</span><br>
        <button v-on:click = "increase()">点击</button><br>
        <button @click = "increase">点击</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count:0
            },
            methods: {
                increase(){
                    this.count++
                }
            },
        })
    </script>

v-on语法

v-on语法总结：
基本用法：写在标签内部，格式：v-on:事件名称 = "实现函数()"
简写：@事件名称 = "实现函数"，如果事件不需要传入参数，可以将函数的小括号省略

v-on的参数问题

    <div id="app">
        鼠标点击次数：<span>{{count}}</span><br>
        <button @click = "increase">点击</button>
        <button @click = "increase2(count)">点击2</button>
        <button @click = "increase3(count,$event)">点击3</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: "#app",
            data: {
                count:0
            },
            methods: {
                increase(event){//调用时没有传入参数
                    this.count++
                    console.log(event)//输出为click事件对象
                },
                increase2(count){//调用函数时传入count
                    this.count++
                    console.log(count)//输出count值
                },
                increase3(count,event){
                    this.count++
                    console.log(count)//输出count值
                    console.log(event)//输出click事件对象
                }
            },
        })
    </script>

注意：当v-on调用事件函数，没有传入参数，默认参数为event对象，如果同时要传入数据和事件对象，则用 $event 作为形参传入

v-on的修饰符

    <div id="app">
        <!-- Vue提供了修饰符来帮助我们方便的处理一些事件 -->

        <!-- 停止冒泡 -->
        <button @click.stop="fn"></button>
        <!-- 阻止默认行为 -->
        <button @click.prevent="fn"></button>
        <!-- 串联修饰符 -->
        <button @click.stop.prevent="fn"></button>
        <!-- 点击只会回调一次函数 -->
        <button @click.once="fn"></button>
        <!-- 阻止默认行为:没有表达式 -->
        <form @submit.prevent></form>
        <!-- 键修饰符，键别名 -->
        <input @keyup.enter="onEnter">
        <!-- 键修饰符，键代码 -->
        <input @keyup.13="onEnter">
    </div>

END

Vue基础语法(值相关)

Mustache语法

v-once语法

v-html语法

v-text语法和v-pre语法

v-bind语法

例子：Mustache展示爱好

计算属性（computed）

计算属性(computed)的setter和getter

事件监听（v-on指令）

v-on的参数问题

v-on的修饰符

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读