Vue_模板语法

最新推荐文章于 2024-11-11 23:32:58 发布

weixin_44248221

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量52

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44248221/article/details/125040582

版权

21 篇文章 0 订阅

订阅专栏

用于解析标签体（标签文本内容）
使用{{name}}赋值
容器：
XXXX，{{name}}
vue实例：new vue{
el:“CSS表达式”，
data:{name:vakue}
}

作用于标签属性，标签文本内容，绑定事件等
v-???形式的指令
v-bind:绑定标签属性，可简写为":"
容器：
//v-bind:绑定
Vue实例：
new vue{
el:
data:{
url:,
hello:
}
}

当容器中用同一变量名，赋多个不同值时，可以使用分级
容器：

<div id="test1">
<h1>插值语法</h1>
<h3>你好，{{name}}</h3>
<h1>指令语法</h1>
<h3>你好，{{xxx.name}}</h3>
</div>

Vue实例：

 new vue{
 el:"#test1"
 data:{
name:“name1”
 xxx:{name:"name2"}
 }
 }

结果：

单双向绑定
v-bind: ：单项绑定（从vue到容器）
v-model：：双向绑定（从vue到容器，也可从容器到vue），只能应用在表单类元素（input ，radio，checkbox，select等）中,默认获取表单元素value属性，故 v-model：value 可简写为v-model
指定容器（el）的两种方式
（1）Vue实例：el:“CSS表达式”
（2）Vue原型方法（类方法）：v.$mount('CSS")表达式
4.data的两种写法
（1）对象式：
data：{name1:
}
（2）函数式(使用组件时，必用)
data:function(){ //this指向vue实例
data(){ //this指向vue实例
data:()=>{ //this指向windows

return ;
}