Vue基础语法(值相关)

Mustache语法

• 基本用法演练：

    

        
{{message}}
        
{{message + message}}
        
标价为：{{price * 2}}
        
取数组下标值：{{arr[2]}}
        
算数运算：{{arr[2] + arr[3] * arr[4]}}
        
直接打印数组：{{arr}}
        

            
姓名：{{obj.name}}
            
年龄：{{obj.age}}
            
身高：{{obj.high}}
            
直接打印对象：{{obj}}
        
        
执行函数：{{fn(3)}}
    

    
    

---

Mustache语法

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

---

v-once语法

• 基本用法演练：

    

        
{{message}}
    

    
    

---

v-once语法

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

---

v-html语法

• 基本用法演练：

    

        
{{link}}
        

    

    
    

---

v-html语法

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

---

v-text语法和v-pre语法

• 基本用法演练：

    

        
{{link}}
        
        
        
{{link}}
    

    
    

---

v-text语法和v-pre语法

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

---

v-bind语法

• 基本用法演练：

    
    
    
    
    



    

        百度一下
        

        ==================================绑定Class====================================
        
isShow
        
isActive + fontSize
        isActive isLine
        
showColor + fontSize
        ==================================绑定Style====================================
        
setColor + size
    

    
    

---

v-bind语法

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

例子：Mustache展示爱好

    

        
我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}
    

    
    

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

计算属性（computed）

• 基本用法演练：

    

        
我的爱好: {{loves[1]}} {{loves[3]}} {{loves[4]}} {{loves[5]}}
        
我的爱好: {{myLoves}}
        结算总价:￥{{totalPrice}} 元
    

    
    

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指令）

• 基本用法演练：

    

        鼠标点击次数：{{count}}

        点击

        点击
    

    
    

---

v-on语法

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

v-on的参数问题

    

        鼠标点击次数：{{count}}

        点击
        点击2
        点击3
    

    
    

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

v-on的修饰符

END