没有合适的资源?快使用搜索试试~ 我知道了~
十、Vue实战(渐进式JavaScript框架)
需积分: 10 0 下载量 110 浏览量
2022-08-04
12:02:54
上传
评论
收藏 1.28MB PDF 举报
温馨提示
试读
39页
十、Vue实战(渐进式JavaScript框架)
资源详情
资源评论
资源推荐
Vue实战
1. Vue 引言
渐进式 JavaScript 框架 --摘自官网
2. Vue入门
2.1 下载Vuejs
2.2 Vue第一个入门应用
#
渐
进
式
1. 易用 html css javascript
2. 高效 开发前端页面 非常高效
3. 灵活 开发灵活 多样性
#
总
结
Vue 是一个javascript 框架 js 简化页面js操作
#
后
端
服
务
端
开
发
人
员
:
Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM
元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM
注意: 日后在使用Vue过程中页面中不要在引入Jquery框架
# Vue
作
者
尤雨溪 国内的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//开发版本:
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
//生产版本:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1
2
3
4
5
6
7
<div id="app">
{{ msg }} {{username}} {{pwd}}
<br>
<span>
{{ username }}
<h1>{{ msg }}</h1>
1
2
3
4
5
6
7
3.Vue属性添加运算符操作
</span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element 用来给Vue实例定义一个作用范围
data:{ //用来给Vue实例定义一些相关数据
msg:"百知欢迎你,期待你的加入!",
username:"hello Vue!",
pwd :"12345",
},
});
</script>
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#
总
结
:
1.vue实例(对象)中el属性: 代表Vue的作用范围 日后在Vue的作用范围内都可以使用Vue的语法
2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{{变量名}}在
Vue作用范围内取出
3.在使用{{}}进行获取data中数据时,可以在{{}}中书写表达式,运算符,调用相关方法,以及逻辑运算
等
4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器 注
意: el属性值不能指定body或html标签
1
2
3
4
5
<body>
<div id="app">
<h3>{{ name }}</h3>
<h3>{{ age }}</h3>
<h3>{{ name+"你好" }}</h3>
<h3>{{ name=="你好" }}</h3>
<h3>{{ name.toUpperCase() }}</h3>
<h3>{{ age+1 }}</h3>
<h3>{{ age-1 }}</h3>
<h3>{{ age*2 }}</h3>
<h3>{{ age/4 }}</h3>
<h3>{{ age%2 }}</h3>
<h3>{{ age==10 }}</h3>
</div>
</body>
</html>
<script src="../js/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
name:"hello",
age:16
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
jquery text html vue v-text v-html
4. v-text和v-html
4.1 v-text
v-text :用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中
innerText
js innerText innerHtml
你好
4.2 v-html
v-html :用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于
javascript中 innerHTML
}
})
</script>
27
28
29
<div id="app" class="aa">
<span >{{ message }}</span>
<span v-text="message"></span>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"百知欢迎您"
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#
总
结
1.{{}}(插值表达式)和v-text获取数据的区别在于
a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数
据
b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁
1
2
3
4
<div id="app" class="aa">
<span>{{message}}</span>
<br>
<span v-text="message"></span>
<br>
<span v-html="message">xxxxxx</span>
</div>
1
2
3
4
5
6
7
8
5.vue中事件绑定(v-on)
5.1 绑定事件基本语法
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"<a href=''>百知欢迎您</a>"
}
})
</script>
9
10
11
12
13
14
15
16
17
18
19
<div id="app">
<h2>{{message}}</h2>
<h2 v-text="message"></h2>
<h2>年龄:{{ age }}</h2>
<br>
<input type="button" value="点我改变年龄" v-on:click="changeage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"hello 欢迎来到百知课堂!",
age:23,
},
methods:{ //methods 用来定义vue中事件
changeage:function(){
alert('点击触发');
}
}
})
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
#
总
结
:
事件 事件源:发生事件dom元素 事件: 发生特定的动作 click.... 监听器:发生特定
动作之后的事件处理程序 通常是js中函数
1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如 v-on:click
2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
3.在vue中事件的函数统一定义在Vue实例的methods属性中
4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取
Vue实例中相关数据
1
2
3
4
5
6
5.2 Vue中事件的简化语法
5.3 Vue事件函数两种写法
<div id="app">
<h2>{{ age }}</h2>
<input type="button" value="通过v-on事件修改年龄每次+1" v-
on:click="changeage">
<input type="button" value="通过@绑定时间修改年龄每次-1"
@click="editage">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app", //element: 用来指定vue作用范围
data:{
age:23,
}, //data : 用来定义vue实例中相关数据
methods:{
changeage:function(){
this.age++;
},
editage:function(){
this.age--;
}
} //methods: 用来定义事件的处理函数
});
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#
总
结
:
1.日后在vue中绑定事件时可以通过@符号形式 简化 v-on 的事件绑定
1
2
<div id="app">
<span>{{count}}</span>
<input type="button" value="改变count的值" @click="changecount">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
count:1,
},
methods:{
/*changecount:function(){
this.count++;
}*/
changecount(){
this.count++;
}
}
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
剩余38页未读,继续阅读
Design7
- 粉丝: 0
- 资源: 19
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0