Vue.js框架
一、Vue.js简介
1.1 Vue.js简述
-
是一套用于构建用户界面的 渐进式框架
-
Vue 被设计为可以 自底向上逐层 应用
-
Vue 的核心库 只关注视图层 ，不仅易于上手，还便于与第三方库或既有项目整合
-
当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单 页应用提供驱动
1.2 Vue.js下载
方式一 从官网上下载开发版本 或 生产版本，使用script标签引入
方式二 引入 CDN
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>1.3 Vue.js实例
使用步骤
1.下载vue.js文件，国内官网地址： cn.vuejs.org
2.将下载的js文件，引入到项目中
3.将js文件，引入到html中
4.在html中，编写一个div标签，并给div标签，添加id属性
5.在JavaScript代码中，创建Vue对象，并挂载到div上
实例：指的是创建的 vue对象
<div id="main"></div>
<script type="text/javascript">
var vm = new Vue({
"el":"#main",
"template":"<h1>Hello vue</h1>"
})
</script>
1.4 挂载点
每一个页面的vue对象，都需要挂载到一个元素上，这个元素就是挂载点
<div id="main"></div> # 这个是挂载点
var vm = new Vue({}); # 实例指的是vue对象，更改实例挂载点中的内容也会跟着变化。
1.5 模板
指的是挂载点被替换的内容，在vue对象中 以 template属性表示
1.6 data属性
data属性，指的是 在创建vue对象时，传入的对象中的 data属性，
属性的值 是一个新的对象，值对象中包含的每一数据，都可以在网页中 使用 通过 插值表达式 使用
使用时，数据都是响应式的
响应式：指的是如果数据发生改变，则所使用数据的位置，也会发生响应的改变。
1.7 插值表达式
格式:（{ data中的属性名称}）
作用：将data中包含的某一个属性的值，展示到网页中。
案例：
<div id="main">
{{d1}} <br>
豪横人：{{name}}
</div>
<script type="text/javascript">
var vm = new Vue({
"el":"#main",
"data":({
"d1":"口号：墨镜一戴，谁也不爱",
"name":""
})
})
</script>
<!-- onblur会在对象失去焦点时发生 -->
<input placeholder="请输入姓名" onblur="vm.name = this.value">1.7 v-text和v-html
v-text 标签属性
作用：用于在挂载点中，加载一些数据
格式：
在挂载点中的任意子标签中：
<标签 v-text="data中的属性名"></标签>
v-html 标签属性
作用：用于在挂载点中，加载一些数据。
格式：
在挂载点中的任意子标签中：
<标签 v-html="data中的属性名"></标签>
v-text 与 v-html 区别
- v-text属性： 就像插值表达式一样，用于将文本数据，插入到网页中，不会解析html标签！
- v-html属性 会将数据中的标签解析执行后，展示到网页上。
<div id="main">
<div v-text="d1"></div>
<div v-html="d1"></div>
</div>
<script type="text/javascript">
var vm = new Vue({
"el":"#main",
"data":{
"d1":"<h1>h1标签</h1>"
}
});
<!--响应式动态改变值-->
vm.d1 = "<span>haha</span>";
</script>1.8 vue组件
- 定义
- 组件是Vue中最强大的功能之一
- 本质
- Vue组件，可以拓展HTML标签,封装可重用的代码。
- 格式（全局组件)
- 在script代码块中，加入如下的代码
<script>
Vue.component("标签名称",{
“template”:"html元素",
})
</script>
- 使用
- 在Vue的挂载点中，通过自定义标签名称来使用
- 案例
<div id="main">
<xdl></xdl>
<xdl></xdl>
<xdl></xdl>
</div>
<script type="text/javascript">
<!--Vue组件-->
Vue.component("xdl",{
"template":"<span style='color:#0f0'>vue组件</span>"
});
var v = new Vue({
"el":"#main",
"data":{
"msg":"vue组件"
}
});
</script>1.8 vue事件
- 格式
- 步骤
- 在挂载点中 需要添加事件的元素上，加入 属性 v-on ：事件类型 = “method对象中的属性名”
- 在vue实例创建的对象中，加入methods属性，属性值是对象， 这个对象中包含一个个的函数值
- 步骤
- 案例--加减发
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue.js--004 Vue事件</title>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="main">
<span>{{count}}</span>
<button v-on:click="add">+</button>
<button v-on:click="sub">-</button>
</div>
<script type="text/javascript">
var v = new Vue({
"el":"#main",
"data":{
"count":1
},
"methods":{
"add":function()
{
this.count++;
},
"sub":function(){
this.count--;
}
}
});
</script>
</body>
</html>二、Vue.js
2.1 属性绑定v-bind
- 其实我们也可以将data中的数据, 赋值给某个标签的 属性. 这些属性值也是响应式的.
- 格式1:
- <标签 v-bind:属性名="data中的属性名"></标签>
- 格式2: 简写
- <标签 :属性名="data中的属性名"></标签>
- 案例
<div id="main">
<!--绑定src属性-->
<img v-bind:src="imgs[index]">
<img :src="imgs[index]">
<img :src="imgs[index]">
<!--点击事件简写-->
<button @click="x1">下一张</button>
</div>
<script type="text/javascript">
var v = new Vue({
"el":"#main",
"data":{
"imgs":["images/14.jpg","images/15.jpg","images/16.jpg","images/17.jpg","images/18.jpg","images/19.jpg"],
"index":0
},
"methods":{
"x1":function(){
this.index++;
if(this.index == this.imgs.length){
this.index = 0;
}
}
}
});
</script>2.2 属性数据双向绑定 (仅适用于输入组件的value属性值)
- 单向绑定
- 当data中数据改变时, 所有使用此数据的位置 都会相应的改变
- 双向绑定
- 当data中数据改变时, 所有使用此数据的位置 都会相应的改变
- 所有使用此数据的位置的数据改变, 也会反过来导致data中的数据改变
- 格式
- <input v-model="data中的属性名">
- 上述的输入框内容 与 data中的某个属性, 就进行了关联, 任何一方改变, 都会导致另一方变化.
- 案例
<div id="main">
<h1>{{val}}</h1>
<input v-model="val">
</div>
<script type="text/javascript">
var v = new Vue({
"el":"#main",
"data":{
"val":"输入框的内容"
}
});
</script>2.3 样式绑定 v-bind
class 与 style属性的绑定 , 我们也是使用v-bind来完成的，但是因为class与style 通常用于修改元素的样式, 所以vue对这两个属性绑定的操作, 进行了增强. v-bind:class 与 v-bind:style 这两个属性的属性值, 除了可以是字符串以外, 还可以是对象/数组
- class属性
- 格式 对象
- <标签名 v-bind:class="{data中的属性名:boolean值}"></标签名>
- 对象中的属性值如果为true , 则属性名就被添加到了class中.
- 案例
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js--007 Vue属性class-v-bind</title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .x{ width:200px; height:300px; border:1px solid red; } .y{ background-color:skyblue; } </style> </head> <body> <div id="main"> <div v-bind:class="{x:c1,y:c2}"></div> <!-- 切换背景按钮--> <button @click="x1">切换背景</button> </div> <script type="text/javascript"> var vm = new Vue({ "el":"#main", "data":{ "c1":true, "c2":true }, "methods":{ "x1":function(){ this.c2 = !this.c2; } } }); </script> </body> </html>
-
- 格式2 对象 格式1的另一种写法，效果一样
- <标签名 v-bind:class="{data中的属性key}"></标签名>
- data中的属性key 对应的值是对象 , 对象中的属性值如果为true , 则属性名就被添加到了class中
- <标签名 v-bind:class="{data中的属性key}"></标签名>
- 案例
-
<div id="main"> <div v-bind:class="obj"></div> <button @click="x1">切换背景</button> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "obj":{x:true,y:true} }, "methods":{ "x1":function(){ this.obj.y = !this.obj.y; } } }); </script>
-
- 格式3 数组
- <标签名 v-bind:class="[data中的数据key,data中的数据key,data中的数据key...]"></标签名>
- 上述格式中的 'data中的数据key' , 对应的值就是添加到class中的 class值
- 案例
-
<div id="main"> <div v-bind:class="[class1,class2,class3]">嘿嘿嘿</div> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "class1":"x", "class2":"y", "class3":"z" } }); </script> - style属性值 (内联样式) -
-
- 格式 对象
- <标签 v-bind:style="{样式键:data中的key,样式键:data中的key...}"></标签>
- data中key的值 是样式的值;
- 案例 fontSize
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js--007 Vue属性class-v-bind</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="main"> <!--样式值是变量，不能带有-，使用时去掉 - 第二个单词首字母大写 如 font-size => fontSize--> <div v-bind:style="{color:a,fontSize:b+'px'}">vue工程师</div> <button @click="x1">放大字体</button> </div> <script type="text/javascript"> var vm = new Vue({ "el":"#main", "data":{ "a":"skyblue", "b":20 }, "methods":{ "x1":function(){ this.b += 2; } } }); </script> </body> </html> - 格式 对象的名称
- <标签 v-bind:style="data中的属性名"></标签>
- data中的属性值 , 是一个对象 , 对象中包含一个或多个属性, 属性名为样式名, 属性值为样式值;
- 案例
-
<div id="main"> <div v-bind:style="x1">一二三四五, 上山打老虎</div> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "x1":{ "color":"#0f0", "font-size":"100px" } } }); </script>
-
- 格式 v-bind绑定的是数组
- 标签 v-bind:style="[data中的属性名,data中的属性名,...]"></标签>
- data中的属性值 , 是一个对象 , 对象中包含一个或多个属性, 属性名为样式名, 属性值为样式值;
- 案例
-
<div id="main"> <div v-bind:style="[x1,x2]">一二三四五, 上山打老虎</div> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "x1":{ "color":"#0f0", "font-size":"100px" }, "x2":{ "text-align":"center", "font-weight":"bold" } } }); </script>
-
- 格式 对象
- 格式 对象
2.4 计算属性
Vue的一个属性的值, 是通过计算得到的.
- 格式
- 在创建vue对象时, 传入的对象中 加入computed 属性 , 属性值是一个对象!
- 对象中包含一个个的键值对, 键就是 计算属性的 属性名 , 值是一个个的function , function的返回值就是计算属性的值.
- 案例
2.5 属性变化的监听器
监听器 可以绑定到每一个属性上, 用于监听属性的变化, 当属性变化时 监听器的代码自动执行 !
- 格式
- 在vue对象创建时 传入的对象中, 加入watch属性 , 属性值是一个对象, 对象中包含一个个的属性.
- 对象中的属性名 是要监听的属性名称, 对象中的属性值是function , 当监听的属性变化时, function自动执行
- 案例
-
<div id="main"> <h3>{{val}},输入的次数:{{count}}</h3> <input v-model="val"> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "val":"", "count":0 }, "watch":{ "val":function(){ this.count++; } } });
-
2.6 v-if 指令
- 作用:
- 用于判断一个元素 ,是否在网页中加载, 如果v-if的值为true , 则加载， 否则不加载
- 语法
- <标签 v-if="data中的属性名"></标签>
- 案例
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js--v-if属性</title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .dialog{ position: fixed; top:0px; left:0px; right:0px; bottom:0px; background-color: rgba(111,111,111,0.3); } .dialog>div{ width:400px; height:300px; background-color: #fff; border-radius: 10px; margin: 50px auto; } </style> </head> <body> <div id="main"> <button @click="x1">点击登录</button> <div v-if="flag" class="dialog"> <div> <h3>用户登录</h3> <div><input placeholder="请输入帐号"></div> <div><input placeholder="请输入密码"></div> <div><input type="submit" value="登录"></div> </div> </div> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "flag":false }, "methods":{ "x1":function(){ this.flag = true; } } }); </script> </body> </html>
-
2.7 v-show 指令
- 作用
- 用于判断一个元素 ,是否在网页中显示, 如果v-show的值为true , 则显，否则隐藏.
- 语法
- <标签 v-show="data中的属性名"></标签>
- 案例
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js--v-if属性</title> <script type="text/javascript" src="js/vue.js"></script> <style type="text/css"> .dialog{ position: fixed; top:0px; left:0px; right:0px; bottom:0px; background-color: rgba(111,111,111,0.3); } .dialog>div{ width:400px; height:300px; background-color: #fff; border-radius: 10px; margin: 50px auto; } </style> </head> <body> <div id="main"> <button @click="x1">点击登录</button> <div v-show="flag" class="dialog"> <div> <h3>用户登录</h3> <div><input placeholder="请输入帐号"></div> <div><input placeholder="请输入密码"></div> <div><input type="submit" value="登录"></div> </div> </div> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "flag":false }, "methods":{ "x1":function(){ this.flag = true; } } }); </script> </body> </html>
-
2.8 v-for 指令
- 作用
- 用于在网页中 循环展示数据.
- 格式1
-
<标签 v-for="变量名 of 数组名"></标签>
-
格式中的变量名 : 表示循环中从数组取出的变量的名称. 这个变量名, 在当前的标签中, 可以使用插值表达式, 输出到网页中
-
格式中的数组名 : data中的属性名, 属性值为数组类型;
-
-
案例
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>vue.js--v-for</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="main"> <ul> <li v-for="item of arr">{{item}}</li> </ul> </div> <script type="text/javascript"> var v = new Vue({ "el":"#main", "data":{ "arr":["小主","梦珠","李梦珠"] }, }); </script> </body> </html>
-
-
-
格式2
-
<标签 v-for="(变量名1,变量名2) of 数组名"></标签>
-
格式中的变量名1 : 表示循环中从数组取出的变量的名称. 这个变量名, 在当前的标签中, 可以使用插值表达式, 输出到网页中
-
格式中的变量名2 : 循环数据的下标.
-
格式中的数组名 : data中的属性名, 属性值为数组类型;
-
-
- 案例
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
