Vue-Day01
Vue介绍
-
渐进式JavaScript框架
-
官网:https://cn.vuejs.org/
-
开发版(在程序员开发阶段使用的版本,有错误提示)
-
生产版(上线版.没有错误提示)
Vue使用
-
书写位置:HTML页面中
-
Vue基本骨架
1 vue的基本框架结构
2 <script>
3 new Vue({
4 键:值
5 el:"元素" //控制vue对象的操作范围,
6 data:{
7 键:值,
8 键2:值2.
9 ...
10 例如:
11 name:'小潘'
12 }
13 })
14 </script>
如何将Vue中的数据渲染到HTML页面中?
使用文本插值: {{变量}} {{键}} 文本插值
Vue语法
第一个Vue程序
1<!DOCTYPE html>
2<html>
3 <head>
4 <meta charset="utf-8">
5 <title></title>
6 </head>
7 <body>
8 <div id="app">
9 <div>{{msg}}</div>
10
11 <script type="text/javascript" src="js/vue.js"></script>
12 <script type="text/javascript">
13 /*
14 vue的基本使用步骤
15 1.需要提供标签用于填充数据
16 2.引入vue.js库文件
17 3.可以使用vue的语法做功能了
18 4.把vue提供的数据填充到标签里面
19 */
20
21 var vm= new Vue({
22 el:'#app',
23 data:{
24 msg:'hello Vue'
25 }
26 });
27 </script>
28 </div>
29 </body>
30</html>
三元运算符
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8" />
6 <meta http-equiv="X-UA-Compatible" content="IE=edge" />
7 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8 <title>三元运算符</title>
9</head>
10
11<body>
12 <script src="js/vue.js"></script>
13 <div id="app">
14 运算结果:{{num+10}} <br />
15 三元运算符示例1:{{num==2?3:10}}<br />
16
17 </div>
18 <!-- 表达式?真:假 -->
19
20</body>
21<script>
22 new Vue({
23 el: "#app",
24 data: {
25 num: 10,
26 num2: 20,
27 bool: "true",
28 },
29 });
30</script>
31
32</html>
运行结果:
v-pre指令
作用:原样输出(可以让插值语法变成文本模式,不解析)
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!-- v-pre:不解析直接输出原格式 -->
4 <p v-pre>{{msg}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1变量',
12 a1:"<a href='http://www.taobao.com'>攻击的代码</a>",
13 name:"张老三"
14 }
15 })
16</script>
效果:
v-html指令
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!--v-html:解析html -->
4 <p v-html='style'>{{style}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1变量',
12 a1:"<h1>hello world</h1>",
13 name:"张老三"
14 }
15 })
16</script>
效果:
v-text指令
1<script src="js/vue.js"></script>
2 <div id="app">
3 <!-- v-text:输入文本，与插值作用相同 -->
4 <p v-text='msg'>{{msg}}</p>
5 <p>{{msg}}</p>
6</div>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 n1:'n1变量',
12 a1:"<h1>hello world</h1>",
13 name:"张老三"
14 }
15 })
16</script>
效果:
v-model指令
Vue中实现双向绑定步骤:
-
1.按照正常骨架进行书写
-
2.使用v-model指令,格式:v-model=’data中的值’
代码实现:
1<body>
2 <div id="app">
3 <input type="text" v-model="inval">
4 <p>{{inval}}</p>
5 </div>
6</body>
7<script>
8 new Vue({
9 el:"#app",
10 data:{
11 inval:''
12 }
13 })
14</script>
- 效果演示:
v-if与v-show指令
1v-if
2可以控制元素的显示或隐藏,指令的值是布尔类型,如果值为true,表示显示元素,如果值为false.表示不显示元素
3 语法格式:
4<元素 v-if="布尔|表达式|变量"></元素>
5 v-if的值得是一个变量
6v-show
7控制元素显示或隐藏,值也是布尔类型
8v-if和v-show的区别:
9v-if的指令的如果为false,就删除节点
10v-show的指令值为false 就是给当前的元素添加一个style属性并设置值为 display:none
11前端:频繁的删除添加节点,是对资源的消耗比较大,给元素设置属性对资源的消耗比较小,所以,频繁的对元素显示或隐藏就使用v-show,反之使用v-if
1 <div id="app">
2 <p v-if="bool">{{n}}</p>
3 <p v-show="bool">{{n1}}</p>
4 </div>
5<script>
6 new Vue({
7 el:"#app",
8 data:{
9 bool:false,
10 n:1,
11 n1:2
12 }
13 })
14</script>
运行效果:
v-cloak
- 原因:由于网路原因,vue.js没有被加载完成,导致页面渲染的时候,出现闪动问题(出现了语法{{}})
- 解决方案:使用斗篷解决,给斗篷加样式表,给元素加斗篷,斗篷中的display会在vue.js加载完成后,实例对象完成后自动清除
1<style>
2 [v-cloak]{
3 display: none;
4 }
5 </style>
6 <div id="app">
7 <p v-cloak>{{str}}</p>
8 </div>
9 <h5>aaaaaa</h5>
10</body>
11<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
12<script>
13 new Vue({
14 el:"#app",
15 data:{
16 str:"这是一个自负传"
17 }
18 })
19</script>
事件绑定
- 采用v-on指令进行事件绑定
- vue中方法如何声明
1 data{},
2 methods:{
3 函数名:function(){
4 函数体
5 }
6 }
1定义方式
2<button v-on:click="num++">点击</button>
3<button @click="num++">点击1</button>
事件函数调用方式
- 直接绑定函数名称
1<button v-on:click='say'>hello</button>
- 调用函数
1<button v-on:click='say()'>hello</button>
事件函数参数传递
- 普通函数和事件对象
1<button @click="handle2(123,456,$event)">点击2</button>
1.如果事件函数直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
2.如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event
1 event ：函数中的默认形参，代表原生 DOM 事件
2当调用的函数，有多个参数传入时，需要使用原生DOM事件，则通过 $event 作为实参传入
3作用：用于监听 DOM 事件
版权声明：本文为yangyang-it原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。