Vue3—01—基本语法

---

 

 

 

一、介绍

vue3创建一个vue实例不再使用new Vue了，而是使用vue.createApp(对象option).mount();

 

二、简单语法

1.mustanche语法和v-text语法：

可以绑定data里的属性，可以使用data里的属性的表达式，可以使用methods里的函数，还可以使用计算属性，还可以使用三元运算符；

v-text就是mustanche语法；

2.v-html

 

 

 

 

三、常用语法

每个绑定仅支持单一表达式，

表达式也就是一段能够被求值的 JavaScript 代码。一个简单的判断方法是是否可以合法地写在 return 后面。

 

 

1.v-bind语法属性绑定

mustanche语法是绑定html标签的内容

v-blind是绑定html标签的属性值；

v-blind还可以结果【】来动态绑定html标签的属性名；比如《img src=‘’》可以为《img  :[name]=''》；

v-blind还可以直接绑定一个对象，对象里的属性作为标签的属性，对象的属性值作为标签的属性值；

 

 

v-blind有三种方式，第一种，最基本的绑定一个data里的属性作为变量；

第二种对象语法：绑定一个对象，对象里第一个参数是变量名，第二个参数是boolean值；当boolean为真时，才会绑定上去；

 

第三种数组语法

 

 

2.v-on语法事件监听

（1）

还可以监听对象，这是我没想到的。。。

 

（2）v-on参数传递问题

不用加括号默认传递event参数，如果需要传递多个参数，记住第一个必须是event，而且要加$符号即$event， 后面跟上自己要传的参数；

 

 

3、条件渲染

 

 

4.列表渲染

5.数组更新检测

使用filter（）方法等方法会返回一个新数组，将把新数组赋值给变量；