Vue.js是一个渐进式框架，专注于视图层。本文介绍了Vue的基础使用，包括v-html、v-on、v-bind等指令的用法，以及绑定对象、数组和样式时的区别。讲解了v-if与v-show的差异以及v-for循环的应用。
什么是Vue？
是一套用于构建用户界面的渐进式框架
vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
控件指令：
v-cloak:防止页面加载时出现闪烁问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
1、通过属性选择器 选择到 带有属性 v-cloak的标签 让他隐藏
*/
[v-cloak]{
/* 元素隐藏 */
display: none;
}
</style>
</head>
<body>
<div id="app">
<!-- 2、 让带有插值 语法的 添加 v-cloak 属性
在 数据渲染完场之后，v-cloak 属性会被自动去除，
v-cloak一旦移除也就是没有这个属性了 属性选择器就选择不到该标签
也就是对应的标签会变为可见
-->
<div v-cloak >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: 'Hello Vue'
}
});
</script>
</body>
</html>v-text:
v-text指令用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题
如果数据中有HTML标签会将html标签一并输出
注意：此处为单向绑定，数据对象上的值改变，插值会发生变化；但是当插值发生变化并不会影响数据对象的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/vue.js" type="text/javascript"></script>
</head>
<body>
<div id="app">
<p v-text="text">{{mag}}</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
// el 指定元素 id 是 app 的元素
el: '#app',
// data 里面存储的是数据
data: {
msg: '你好，vue1',
user:{"name":"张三","age":"18"},
html: "<span>html标签在渲染的时候被解析</span>",
<!-- 输出：-->
message:"<span>通过双括号绑定</span>",
<!-- 输出：-->
text:"<span>html标签在渲染的时候被源码输出</span>"
}
});
</script>
会原样输出，不会解析里面的标签
v-html
-
用法和v-text 相似 但是他可以将HTML片段填充到标签中
-
可能有安全问题, 一般只在可信任内容上使用
v-html，永不用在用户提交的内容上 -
它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/vue.js" type="text/javascript"></script> </head> <body> <div id="app"> <!-- {{msg}}--> <!-- {{user.name}}--> <!-- {{user.age}}--> <!-- <span v-pre>{{msg}}</span>--> <!-- <!–v-once可以显示第一次数据–>--> <!-- <span v-once>{{msg}}</span>--> <span v-html="html"></span> <!-- <p>{{message}}</p>--> <!-- <p v-text="text">{{mag}}</p>--> <!-- <input type="text" v-model="msg">--> </div> </body> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data 里面存储的是数据 data: { msg: '你好，vue1', user:{"name":"张三","age":"18"}, html: "<span>html标签在渲染的时候被解析</span>", <!-- 输出：--> message:"<span>通过双括号绑定</span>", <!-- 输出：--> text:"<span>html标签在渲染的时候被源码输出</span>" } }); </script> </html>
v-pre
-
显示原始信息跳过编译过程
-
跳过这个元素和它的子元素的编译过程。
-
一些静态的内容不需要编译加这个指令可以加快渲染
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span v-pre>{{ this will not be compiled }}</span> <!-- 显示的是{{ this will not be compiled }} --> <span v-pre>{{msg}}</span> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data 里面存储的是数据 data: { msg: 'Hello Vue' } }); </script> </body> </html>v-once
-
执行一次性的插值【当数据改变时，插值处的内容不会继续更新】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span v-once>{{ msg}}</span> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data 里面存储的是数据 data: { msg: 'Hello Vue' } }); </script> </body> </html>双向数据绑定
-
当数据发生变化的时候，视图也就发生变化
-
当视图发生变化的时候，数据也会跟着同步变化
-
v-model是一个指令，限制在
<input>、<select>、<textarea>、components中使用<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div>{{msg}}</div> <div> <!-- 当输入框中内容改变的时候， 页面上的msg 会自动更新--> <input type="text" v-model='msg'> </div> </div> <script type="text/javascript" src="js/vue.js"></script> <script type="text/javascript"> var vm = new Vue({ // el 指定元素 id 是 app 的元素 el: '#app', // data 里面存储的是数据 data: { msg: 'Hello Vue' } }); </script> </body> </html>
mvvm
-
MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
-
m model
-
数据层 Vue 中 数据层 都放在 data 里面
-
-
v view 视图
-
Vue 中 view 即 我们的HTML页面
-
-
vm （view-model） 控制器 将数据和视图层建立联系
-
vm 即 Vue 的实例 就是 vm
v-on
用来绑定事件的
形式如：v-on:click 缩写为 @click;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>{{num}}</div>
<div>
<!-- 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数 -->
<button @click='handle1'>点击1</button>
<!-- 2、如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，
并且事件对象的名称必须是$event
-->
<button @click='handle2(123, 456, $event)'>点击2</button>
</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
num: 0
},
methods: {
handle1: function(event) {
console.log(event.target.innerHTML)
this.num++;
},
handle2: function(p, p1, event) {
console.log(p, p1)
console.log(event.target.innerHTML)
this.num++;
}
}
});
</script>
</body>
</html>
v-bind
-
v-bind 指令被用来响应地更新 HTML 属性
-
v-bind:href 可以缩写为 :href;
绑定对象：
-
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js" type="text/javascript"></script> <style> .box{ border:1px dashed #f0f; } .textColor{ color:#f00; background-color:#eef; } .textSize{ font-size:30px; font-weight:bold; } </style> </head> <body> <div id="app"> <!-- <img v-bind:src="imageSrc">--> <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}"> <li>学习Vue</li> <li>学习Node</li> <li>学习React</li> </ul> <!-- <ul class="box" :class="[classA, classB]">--> <!-- <li>学习Vue</li>--> <!-- <li>学习Node</li>--> <!-- <li>学习React</li>--> <!-- </ul>--> <!-- <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>--> </div> <script> new Vue({ el:'#app', data:{ // imageSrc:"images/1.png", isColor:true, isSize:true, activeColor:"red", activeSize:"25px", // classA:"textColor", // classB:"textSize", } }) </script> </body> </html>
绑定class：
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js" type="text/javascript"></script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imageSrc">-->
<!-- <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">-->
<!-- <li>学习Vue</li>-->
<!-- <li>学习Node</li>-->
<!-- <li>学习React</li>-->
<!-- </ul>-->
<ul class="box" :class="[classA, classB]">
<li>学习Vue</li>
<li>学习Node</li>
<li>学习React</li>
</ul>
<!-- <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>-->
</div>
<script>
new Vue({
el:'#app',
data:{
// imageSrc:"images/1.png",
// isColor:true,
// isSize:true,
// activeColor:"red",
// activeSize:"25px",
classA:"textColor",
classB:"textSize",
}
})
</script>
</body>
</html>图片效果同上
绑定对象和绑定数组的区别
-
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
-
绑定数组的时候数组里面存的是data 中的数据
绑定style
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js" type="text/javascript"></script>
<style>
.box{
border:1px dashed #f0f;
}
.textColor{
color:#f00;
background-color:#eef;
}
.textSize{
font-size:30px;
font-weight:bold;
}
</style>
</head>
<body>
<div id="app">
<!-- <img v-bind:src="imageSrc">-->
<!-- <ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">-->
<!-- <li>学习Vue</li>-->
<!-- <li>学习Node</li>-->
<!-- <li>学习React</li>-->
<!-- </ul>-->
<!-- <ul class="box" :class="[classA, classB]">-->
<!-- <li>学习Vue</li>-->
<!-- <li>学习Node</li>-->
<!-- <li>学习React</li>-->
<!-- </ul>-->
<div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>
</div>
<script>
new Vue({
el:'#app',
data:{
// imageSrc:"images/1.png",
// isColor:true,
// isSize:true,
activeColor:"green",
activeSize:"25px",
// classA:"textColor",
// classB:"textSize",
}
})
</script>
</body>
</html>
v-if 使用场景
-
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
-
2- 进行两个视图之间的切换
v-show 和 v-if的区别
-
v-show本质就是标签display设置为none，控制隐藏
-
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
-
v-if是动态的向DOM树内添加或者删除DOM元素
-
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 判断是否加载，如果为真，就加载，否则不加载-->
<span v-if="flag">
如果flag为true则显示,false不显示!
</span>
<div v-if="type === 'A'">
A
</div>
<!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行-->
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
不及格
</div>
<!-- v-else紧跟在v-if或v-else-if之后-->
<div v-else>
Not A/B/C
</div>
</div>
</body>
<script>
var vm = new Vue({
el:"#app",
data:{
flag:false,
type:"C"
}
})
</script>
</html>
v-for
-
用于循环的数组里面的值可以是对象，也可以是普通元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<style>
ul{
list-style: none;
}
</style>
</head>
<body>
<ul id="app">
<!-- 循环结构-遍历数组
item 是我们自己定义的一个名字 代表数组里面的每一项
items对应的是 data中的数组-->
<li v-for="item in items">
{{item.name }}
{{item.age}}
</li>
</ul>
<button @click="del(user.userid)"></button>
<button @click="update(user)"></button>
<script>
new Vue({
el: '#app',
data: {
items: [
{ "userid":1,"name": '张三' ,"age":"18"},
{ "userid":2,"name": '李四' ,"age":"18"},
{ "userid":3,"name": '王五' ,"age":"18"},
{ "userid":4,"name": '赵六' ,"age":"18"}
]
},
methods:{
del:function (id) {
alert(id);
},
update:function (id) {
alert(id);
}
}
})
</script>
</body>
</html> 
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
