<body>
<!-- 创建容器,通绑定id值
注:搭建脚手架(vue-cli)后只能出现一个容器-->
<div id="app">
<!-- {{}} 插值-->
{{message}}
</div>
<div id="abc" class="box">
{{aaa}}--------
<h1>
{{a+b}}------{{c+d}}-----{{e+f}}-----{{c>9?1:2}}-----{{func(99)}}
</h1>
</div>
<div id="ips">
{{this.abc}}
<h1>
<a href="http://www.baidu.com">访问百度</a>
<!-- 指令
1.绑定元素的属性 v-bind: -->
<a v-bind:href="num">访问vue官网</a>
</h1>
</div>
</body>
vue启动时出现的提示,Vue.config.productionTip阻止启动提示
1.el:“容器名称,如id或class等”
2.Vue实例.
m
o
u
n
t
(
"
容器名称,如
i
d
或
c
l
a
s
s
等
"
)
注:
mount("容器名称,如id或class等") 注:
mount("容器名称,如id或class等")注:mount绑定方式一定放在实例最后
1.
简写形式 :
v-bind: == : –
访问链接
绑定事件
v-on: == @
v-on:事件类型 事件类型一定不要加on –
2.
methods存放函数方法
注:尽量不要使用箭头函数,否则拿取不到data的数据
注:函数名称不要与变量名称一致
3.
v-if 做判断,隐藏(是否存在)
区别:对于元素只是一次可以选择使用v-if(消耗内存),操作次数多v-show(并没有销毁元素)
1.在vue2中,v-for优先级比v-if高
在vue3中,v-if优先级比v-for高
2. v-if和v-for不能同时使用
3、同时使用需要在外层嵌套盒子,在外层进行v-if判断,在内层进行v-for循环
4. v-show 隐藏(是否展示) 默认隐藏
比如:
v-bind:或:绑定属性名,单向数据绑定
v-on:或@绑定事件
v-for遍历
v-if判断和v-show 显示隐藏
v-else和v-else-if判断
4.
v-text和v-html,插值区别
1.v-text和v-html相同点:都会覆盖文本
不同点:v-text只读取文本,v-html读取标签
2.插值添加值,
注:不要在用提交时使用v-html,不要在动态渲染时时使用v-html