版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
Vue的使用过程
- 第一步：引入vue.js
- 第二步：确定范围，确认所要解析的标签。
- 第三步：实例化一个vue对象，用该对象来解析标签的所有指令。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue实例</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="mydiv">
<h2>{{title}}</h2>
{{msg}}
</div>
</body>
<script>
//新建一个Vue实例
var vm = new Vue({
//挂载到什么标签
el:"#mydiv",
//要传输的数据
data:{
msg:'hello vue.js',
title:'This is a title'
}
});
</script>
</html>
插值表达式
语法：使用一对大括号{{变量、表达式、函数调用}}
特点：可以通过|管道符调用过滤器
缺点：在vue渲染页面前源代码会显示出来
文本渲染
- v-text 用于纯文本的显示，如果字符串中含有html标签，会被当做字符串显示出来
- v-html 如果内容中含有html标签，会解析成dom节点显示
- v-cloak 以属性的方式定义元素，解决插值表达式的缺陷
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本渲染</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<style>
[v-cloak]{
display:none;
}
</style>
<body>
<!--<div id="mydiv" v-html="msg">
{{msg}}
</div>-->
<!--<div id="mydiv" v-text="msg">
{{msg}}
</div>-->
<div id="mydiv" v-cloak="">
{{msg}}
</div>
</body>
<script>
new Vue({
el:"#mydiv",
data:{
msg:'<h1>这是一级标题</h1>'
}
});
</script>
</html>
事件on绑定
v-on:事件名="函数名",可以简写为@事件名="函数名"
常用事件
- v-on:click
- v-on:keydown
- v-on:keyup
- v-on:mousedown
- v-on:mouseover
- v-on:submit
-
阻止冒泡
-
事件名.stop 本元素响应完该事件后，该时间不继续冒泡给父元素。
-
-
阻止默认事件
-
事件名.prevent 阻止该元素的默认行为
-
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="mydiv" @click="myfun2">
<button v-on:click="myfun1">点我</button>
<!--click.stop表示p的单击事件处理完成后，不在继续冒泡给父元素-->
<p @click.stop="myfun3">这是段落</p>
<!-- 阻止默认行为 -->
<a href="https://blog.csdn.net/qq_40657585/article/details/102563476">本文首页</a>
</div>
</body>
<script>
new Vue({
el:"#mydiv",
data:{},
methods:{//定义方法，多个方法用,隔开
myfun1(){
alert('1111');
},
myfun2(){
console.log('22222');
},
myfun3(){
console.log('333333');
}
}
});
</script>
</html>
条件语句
v-if和v-else和v-else-if
作用：根据表达式的值的真假条件来决定是否渲染元素，如果为true，则渲染，否则隐藏。
v-show
作用：根据表达式的真假值，切换元素的display CSS属性，如果为falsee，则在元素上添加display:none来隐藏元素，否则移除display:none实现显示元素
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="app">
<p v-if="flg">这是使用v-if的段落</p>
<p v-else="">这是v-else使用的段落</p>
<p v-show="isShow">这是show的段落</p>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
flg:false,
isShow:true
}
});
</script>
</html>
练习
点击按钮，实现标签的显示、隐藏和切换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>标签的显示、隐藏和切换</title>
<script src="../../js/vue.js"></script>
<style>
.pstyle{
height: 100px;
width: 100px;
background-color: greenyellow;
}
</style>
</head>
<body>
<div id="app">
<button @click="show">显示</button>
<button @click="hidden">隐藏</button>
<button @click="trigger">切换</button>
<div class="pstyle" v-if="isShow">
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
isShow:false
},
methods:{
show:function(){
this.isShow = true;
},
hidden:function(){
this.isShow = false;
},
trigger:function(){
this.isShow = !this.isShow;
}
}
});
</script>
</html>
动态属性v-bind
作用：动态设置属性值，可以给html元素或者组件动态地绑定一个或者多个特性，例如动态绑定style，class，title等。
语法：
- v-bind:属性名="引用data中定义的变量"
- 简写： :属性名="引用data中定义的变量"
例子：
实现效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态设置属性值</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
<style>
#mydiv{
width: 200px;
height: 200px;
border: purple solid 1px;
}
.mydiv{
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<span v-bind:title="msg">
鼠标悬停几秒钟查看此处动态绑定的提示信息
</span>
<br />
<h3>标签类的切换</h3>
<button @click="add()">增加类</button>
<button @click="rem()">删除类</button>
<button @click="tri()">切换</button>
<div id="mydiv" v-bind:class="{mydiv:divflg}"></div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg: '页面加载于' + new Date().toLocaleString(),
divflg:true
},
methods:{
add:function(){
this.divflg = true;
},
rem:function(){
this.divflg = false;
},
tri:function(){
this.divflg = !this.divflg;
}
}
});
</script>
</html>
v-once
作用：在第一次DOM时进行渲染，渲染完成后视为静态内容，跳出以后的渲染过程。
v-pre
作用：在模板中跳过vue的编译，直接输出原始值。就是在标签中加入v-pre就不会输出vue中的data值了。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-once和v-pre</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="app">
<div v-once>
<!--只渲染一次，即使数据更新，也不再变化-->
这是第一次绑定的值：{{msg}}
</div>
<div v-pre>
<!--并不会输出msg的值，输出为{{msg}}-->
{{msg}}
</div>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'hydra'
}
});
</script>
</html>
v-for
作用：遍历数组、对象或者指定遍历多少次。
语法：
- 遍历数组语法：v-for="(v,i) in list"
- 遍历对象语法：v-for="(v,k) in obj"
- 遍历指定次数语法：v-for="n in 5"
例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for用法</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="app">
<h3>v-for循环遍历集合</h3>
<ul>
<li v-for="v in list">
姓名：{{v.name}},年龄：{{v.age}}
</li>
</ul>
<h3>带索引的集合遍历</h3>
<ul>
<li v-for="(v,i) in list">
{{i+1}}、姓名：{{v.name}},年龄：{{v.age}}
</li>
</ul>
<h3>v-for遍历对象属性</h3>
<ul>
<li v-for="a in list">
{{a}}
</li>
</ul>
<h3>遍历对象属性名和值</h3>
<li v-for="(val,name) in list">
{{name}}:{{val}}
</li>
<h3>v-for循环迭代整数</h3>
<ul>
<li v-for="num in 8">
{{num}}
</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
list:[
{name:'hydra',age:'18'},
{name:'jean',age:'19'},
{name:'lucy',age:'20'}
]
}
});
</script>
</html>
双向绑定v-model
作用：表单值的双向绑定，就是视图中值发生变化，model也跟着变化，反之也一样。
v-model仅能在如下元素中使用：
- input
- select
- textarea
- components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>双向数据绑定</title>
<script type="text/javascript" src="../../js/vue.js" ></script>
</head>
<body>
<div id="app">
<input type="text" placeholder="请输入文字" v-model="msg"/>
<p>你所输入的文字为{{msg}}</p>
<h3>v-model双向绑定多行文本框</h3>
<textarea v-model="msg2"></textarea>
<p>你所输入的内容为{{msg2}}</p>
<h3>复选框的双向数据绑定</h3>
<input id="a" type="checkbox" name="hobbies" value="swim" v-model="hobbies" /><label for="a">游泳</label>
<input id="b" type="checkbox" name="hobbies" value="music" v-model="hobbies" /><label for="b">音乐</label>
<input id="c" type="checkbox" name="hobbies" value="game" v-model="hobbies" /><label for="c">游戏</label>
<input id="d" type="checkbox" name="hobbies" value="study" v-model="hobbies" /><label for="d">学习</label>
<p>你的爱好为{{hobbies}}</p>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
msg:'sdut',
msg2:'',
hobbies:[]
}
});
</script>
</html>