Vue2.0 内部指令学习记录
Hello World
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>Hello world</title>
</head>
<body>
<h1>Hello World</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</body>
</html>
- 在
script
代码中先实例化vue
对象el
选项通过值#app
与id
值为app
的div
标签进行关联data
选项作为返回数据- 在关联的
div
标签中通过{{}}
来引用返回数据值
v-if & v-else & v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-if&V-else&V-show</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>V-if&V-else&V-show</h1>
<hr>
<div id="app">
<div v-if="isLogin">你好,zhangdd</div>
<div v-else>你好,请先登录</div>
<hr>
<div v-show="isLogin">你好,zhangdd</div>
</div>
<script type="text/javascript">
var app =new Vue({
el:'#app',
data:{
isLogin:true
}
})
</script>
</body>
</html>
v-if
是vue
的一个内部指令,指令用在html
中用来判断是否加载html
的DOM
- 当
data
选项中isLogin
为true
时显示你好,zhangdd
- 当为
false
时显示你好,请先登录
v-show
调整css
中的display
属性值,根据isLogin
的值来控制是否显示
v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>V-for 案例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>V-for</h1>
<hr>
<div id="app">
<ul>
<li v-for="item in items1">
{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
<hr>
<ul>
<li v-for="student in sortStudents">
{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app =new new Vue({
el:'#app',
data:{
items:[20,23,18,7,32,19,54,56,41],
items1:[20,23,18,7,32,19,54,56,41],
students:[
{name:'jspang',age:33},
{name:'panda',age:30},
{name:'lucky',age:26},
{name:'zhangdd',age:15}
]
},
computed:{
sortItems:function(){
return this.items.sort(sortNumber);
},
sortStudents:function(){
return sortByKey(this.students,'age');
}
}
})
function sortNumber(a,b){
return a-b;
}
//数组对象方法排序:
function sortByKey(array,key){
return array.sort(function(a,b){
var x=a[key];
var y=b[key];
return ((x<y)?-1:((x>y)?1:0));
});
}
</script>
</body>
</html>
v-for
指令是循环渲染data
中的数组,v-for
指令需要以item in items
的语法去使用items 是源数据数组并且item是数组元素迭代的别名。
做了三个循环的显示,分别是
- 无序按照原数组顺序进行显示
- 数字排序
- 自定义排序
computed
选项中做计算操作,需要注意的是该选项中如果不是对data
选项的数据做赋值操作,需要重新定义一个匿名变量,同时html
中在使用v-for
指定进行循环使用时用新定义的这个。
v-text & v-html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript" src="../assets/js/vue.js"></script>
<title>V-text & V-html</title>
</head>
<body>
<h1>V-text & V-html </h1>
<hr>
<div id="app">
<span>{{message}}</span>=<span v-text="message"></span>
<hr>
<span v-html="messageHtml"></span>
</div>
<script type="text/javascript">
var app =new Vue({
el:'#app',
data:{
message:'hello world',
messageHtml:"<h1>hello world</h1>"
}
})
</script>
</body>
</html>
在
html
中输出data
选项中的值可以使用{{xxx}}
来完成,但是这么做存在一定的弊端,当网速很慢或者javascript
出错时在html
中显示的直接就是{{xxx}}
。v-text
就是解决这个问题的。
- 通过
v-text
指定赋值data
选项里的内容就可以得到对应的值- 同时保证了在
javascript
出错或者网速慢的时候不会出现不友好的{{xxx}}
现象
如果
data
选项中的值为html
标签,在通过{{xxx}}
或者v-text
进行输出时,现象是无法输出或者原数据输出,即无法解析。这个时候就需要使用v-html
指定来完成操作了。但是
v-html
指定在使用时有一定的弊端。在生产环境中动态渲染HTML是非常危险的,因为容易导致XSS攻击。所以只能在可信的内容上使用v-html,永远不要在用户提交和可操作的网页上使用
v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-on 事件监听器</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-on 事件监听器</h1>
<hr>
<div id="app">
本场比赛得分 {{count}}
<br>
<button v-on:click="addScore">加分</button>
<button @click="descScore">减分</button>
<br>
<input type="text" v-on:keyup.enter="onEnter" v-model="secondScore">
</div>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data () {
return {
count:0,
secondScore:1
}
},
methods: {
addScore:function(){
this.count++;
},
descScore:function(){
this.count--;
},
onEnter:function(){
this.count+=parseInt(this.secondScore)
}
}
})
</script>
</body>
</html>
v-on
就是监听事件,可以用v-on
指令监听DOM
事件来触发一些javascript
代码另外
v-on
也有简写的方式通过@
代替
v-on:click="addScore"
关联一个addScore
方法- 在
methods
选项中实现对应方法- 同样的方式通过
@click="descScore"
关联descScore
方法- 在
methods
选项中实现对应方法
另外还可以和键盘事件进行绑定
v-on:keyup.enter="onEnter"
将回车键和onEnter
方法进行关联- 在
methods
选项中实现对应的方法v-model
是数据源的绑定即绑定值为data
选项中对应的值
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-model 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-model 实例</h1>
<hr>
<div id="app">
<p>原始文本信息</p>{{message}}
<p>v-model:<input type="text" v-model="message"></p>
<p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
<p>v-model.number: <input type="text" v-model.number="message"></p>
<p>v-model.trim: <input type="text" v-model.trim="message"></p>
<h3>文本域</h3>
<textarea cols="30" rows="10" v-model="message"></textarea>
<h3>多选按钮绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue">
<label for="isTrue">{{isTrue}}</label>
<h3>多选绑定一个数组</h3>
<input type="checkbox" id="JSPang" value="JSPang" v-model="web_name">
<label for="JSPang">JSPang</label>
<input type="checkbox" id="panda" value="panda" v-model="web_name">
<label for="panda">panda</label>
<input type="checkbox" id="panpan" value="panpan" v-model="web_name">
<label for="panpan">panpan</label>
<p>{{web_name}}</p>
<h3>单选按钮绑定</h3>
<input type="radio" id="one" value="男" v-model="sex">
<label for="one">男</label>
<input type="radio" id="two" value="女" v-model="sex">
<label for="two">女</label>
<p>{{sex}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
message: 'hello world',
isTrue: false,
web_name:[],
sex:'男'
}
}
})
</script>
</body>
</html>
v-model
指定用来完成数据绑定的功能。
v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-bind 实例</h1>
<hr>
<div id="app">
<p>
<img v-bind:src="imgSrc" width="200px"></p>
<p><a :href="web_url" target="_blank">百度</a></p>
<hr>
<div :class="className">1. 绑定Class</div>
<div :class="{classA:isOk}">2. 绑定Class中的判断</div>
<input type="checkbox" id="isOk" v-model="isOk">
<label for="isOk">{{isOk}}</label>
<div :class="[classA,classB]">3. 绑定Class中的数组</div>
<div :class="isOk?classA:classB">4、绑定class中的三元表达式判断</div>
<div :style="{color:red,fontSize:font}">5、绑定style</div>
<div :style="styleObject">6、用对象绑定style样式</div>
</div>
<style>
.classA {
color: red }
.classB {
font-size: 150% }
</style>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
imgSrc: 'https://www.baidu.com/img/bd_logo1.png?where=super',
web_url: 'https://www.baidu.com',
className: 'classA',
isOk: false,
classA: 'classA',
classB: 'classB',
red:'red',
font:'20px',
styleObject:{
color:'green',
fontSize:'24px'
}
}
}
})
</script>
</body>
</html>
v-bind
是处理HTML
中的标签属性的,和v-on``v-model
同为绑定,只不过绑定的点不一样
v-pre & v-cloak & v-once
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-pre & v-cloak & v-once 实例</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>v-pre & v-cloak & v-once 实例</h1>
<hr>
<div id="app">
<div v-pre>{{message}}</div>
<div v-cloak>渲染完成后才会显示</div>
<p v-once>第一次绑定的值: {{message}}</p>
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data() {
return {
message: 'hello world'
}
}
})
</script>
</body>
</html>
v-pre
可以跳过vue
的编译直接输出原始值即{{xxx}}
v-cloak
在页面进行加载时,只有加载完成后才会显示的内容
v-once
在第一次DOM
时进行渲染,渲染完成后视为静态内容,跳出以后的渲染过程