没有合适的资源?快使用搜索试试~ 我知道了~
笔记VUE2基础教程,更新中有些不全
资源推荐
资源详情
资源评论
vue.js是用户界面的渐进式框架
虚拟dom
数据驱动视图
数据与视图分离
组件化
安装sniper,新建路由页面方便
diff算法9
diff 算法就是对虚拟 dom 进行对比,并返回一个 patch 对象,这个对象的作用是存储两个节点不同
的地方,最后用 patch 里记录的信息去局部更新真实的 dom
双大括号插值表达,开辟了js执行环境,可以写js代码,不能写html结构,一个元素中可以用多个插值
表达式
语法
<script src="vue.js"></script>
1
</head>
2
<body>
3
<div id="app">
4
<h1>{{message}}</h1>
5
</div>
6
<script>
7
new Vue({
8
el:"#app",”
9
data:{
10
message:"hi"
11
}
12
})
13
</script>
14
所有指令的引号都是执行js环境的,不是字符串
可以插入html标签,会覆盖被插入的元素里面的标签
可以插入text
开启js环境
动态绑定属性
<div v-bind:属性名:属性值 > </div>
简写<div 冒号 属性名:属性值 > </div>.
特殊情况
class
可以绑定到一个字符串,字符串名就是class名
可以绑定到对象,对象的属性名就是class名,对象的属性值就是布尔,代表是否存在class
可以绑定到数组,数组里面的值就class名
指令
v-html
v-text
v-bind
style
可以绑定到对象,对象就是样式对象
可以在style后面加数组,就是绑定到多个样式对象,
v-on:事件=“函数名” 可以缩写,@事件名=“函数名”
函数如果有参数就加括号,没有就不加
<div id="app" :style="[cssStyle1,cssStyle2]":class="obj">
1
<h1>啊啊 {{message}}</h1>
2
</div>
3
<script>
4
new Vue({
5
@ el: "#app",
6
data: {
7
message: "hi",
8
obj: {
9
title: true, //为true时候,title才为class名
10
index: false//为false时候,不是class名
11
},
12
arr: ["ket", "art"],
13
bc: "blue",
14
cssStyle1: {
15
backgroundColor: "red",
16
color:"pink"
17
},
18
cssStyle2:
19
{
20
width: "500px",
21
height: "200px"
22
}
23
}
24
})
25
返回
26
<div id="app" class="aa" style="background-color: red; color: pink; width:
500px; height: 200px;">
27
<h1>啊啊 hi</h1></div>
28
v-on
修改样式,display的show不加引号就是变量,加引号就是字符串写死了因为是外面有一层引号,再加
引号就是字符串
三目运算符切换显示
<div id="app">
1
<h1 v-html="msg"></h1>
2
<button @click="fn">ok</button>
3
</div>
4
5
<script>
6
new Vue({
7
el: "#app",
8
data: {
9
msg:"hello"
10
},
11
methods:{
12
fn(){
13
this.msg="你好"
14
}
15
}
16
})
17
<h1 v-html="msg" :style="{display:show}"></h1>
1
<button @click="fn">ok</button>
2
</div>
3
4
<script>
5
new Vue({
6
el: "#app",
7
data: {
8
msg:"hello",
9
show:"none"
10
},
11
methods:{
12
fn(){
13
this.show="block"
14
}
15
}
16
})
17
如果要拿事件对象e又要传参,就外面套层函数传事件对象e,里面传事件对象和参数
v-on:事件名="(e)=>{fn(e,arg)}"
<div id="app">
1
<button @click="fn">ok</button>
2
<h1 v-html="msg" :style="{display:show}"></h1>
3
4
</div>
5
6
<script>
7
new Vue({
8
el: "#app",
9
data: {
10
msg:"hello",
11
show:"block"
12
},
13
methods:{
14
fn(){
15
this.show=this.show=="block"?"none":"block"
16
}
17
}
18
})
19
<div id="app">
1
<button @click="(e)=>{fn(e,7)}">ok</button>
2
<h1 v-html="msg" :style="{display:show}"></h1>
3
4
</div>
5
6
<script>
7
new Vue({
8
el: "#app",
9
data: {
10
msg:"hello",
11
show:"block"
12
},
13
methods:{
14
fn(e,index){
15
this.show=this.show==="block"?"none":"block"
16
剩余29页未读,继续阅读
资源评论
春笋2022
- 粉丝: 0
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功