vue学习（一）—vue.js2.0指令学习
Hello World 实例<!DOCTYPE html><html><head><meta charset="UTF-8"><title>helloworld</title><meta name=
·
- Hello World 实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>helloworld</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<h1>HelloWorld</h1>
<hr />
<div class="app">
{{message}}
</div>
<script type="text/javascript">
var app=new Vue({
el:'.app',
data:{
message:'hello world!'
}
})
</script>
</body>
</html>
- v-if&v-else&v-show指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-if&v-else&v-show</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-if&v-else&v-show</h1>
<hr />
<div class="app">
<div v-if="isLogin">
你好，您已经登录
</div>
<div v-else-if="haveName">
您好，huangxiaoguo！
</div>
<div v-else>
请登录
</div>
<div v-show="isShow">
<h3>v-if 和v-show的区别：</h3>
<p>v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。</p>
<p>v-show：调整css dispaly属性，可以使客户端操作更加流畅。</p>
</div>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
isLogin: false,
haveName: false,
isShow: true
}
})
</script>
</body>
</html>- isLogin 为true ，显示：你好，您已经登录
- isLogin: false,haveName: true, 显示：您好，huangxiaoguo！
- isLogin: false,haveName: false, 显示：请登录
-
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。 v-show：调整css dispaly属性，可以使客户端操作更加流畅。
- v-for&排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-for&排序</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-for&排序</h1>
<hr />
<div class="app">
<ul>
<!--让那个标签循环，写在那个标签上面-->
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
<hr />
<ul>
<li v-for="student in sortStudents">
{{student.name}}-{{student.age}}</li>
</ul>
<ul>
<li v-for="(student,index) in sortStudents">
{{index}}-{{student.name}}-{{student.age}}</li>
</ul>
<!--
打印出对象，:key='index'目的提高效率
-->
<ul>
<li v-for="(value,key,index) in person" :key='index'>
value:{{value}}
key:{{key}}
index:{{index}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
items: [45, 58, 4565, 45, 51, 5, 45, 98, 558, 47, 88],
students: [{
name: 'Jsp',
age: 33
},
{
name: 'Pande',
age: 38
},
{
name: 'Panpan',
age: 23
},
{
name: 'King',
age: 13
},
{
name: 'Huang',
age: 12
},
{
name: 'Huangxiaoguo',
age: 30
}
],
person:{
name:"huangxiaoguo",
age:25,
job:"前端工程师"
}
},
//计算
computed: {
//The computed property "items" is already defined in data.
//这里是vue的保护机制，如果不重新声明会污染原来的数据源
//同时上面也要适应下面的变量
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也可以循环对象输出内容
一般最好加上
:key='index'
提高性能- v-text&v-html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-text&v-html</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-text&v-html</h1>
<hr />
<div class="app">
<!--
一般项目中多使用v-text="message"，
防止js出错或者网速慢的时候出现不友好的页面
例如直接显示：{{message}}
-->
<span>{{message}}</span>=<span v-text="message"></span>
<span>{{dodo}}</span>
<!--
这个方式一般不要使用，容易引起xss黑客攻击
-->
<span v-html="dodo"></span>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
message: 'hello world!',
dodo: '<h2>hello world</h2>'
}
})
</script>
</body>
</html>- v-on
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-on</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-on</h1>
<hr />
<div class="app">
本场比赛得分:{{fenshu}}
<p>
<button v-on:click="jiafen">加分</button>
<!--简写-->
<button @click="jianfen">减分</button>
<br />
<!--
v-model:绑定数据源
@keyup.enter:绑定键盘(@keyup.13)
-->
<input type="text" @keyup.enter="onEnter" v-model="fenshu2" />
</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
fenshu: 0,
fenshu2: 1
},
methods: {
jiafen: function() {
this.fenshu++;
},
jianfen: function() {
this.fenshu--;
},
onEnter: function() {
if(this.fenshu2==''){
this.fenshu2=0;
}
this.fenshu = this.fenshu + parseInt(this.fenshu2);
}
}
})
</script>
</body>
</html>- v-model双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-model双向数据绑定</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<h1>v-model双向数据绑定</h1>
<hr />
<div class="app">
<p>元素数据：{{message}}</p>
<h3>文本框</h3>
<br />
<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>
<hr />
<h3>文本域</h3>
<textarea rows="2" cols="50" v-model="message"></textarea>
<hr />
<h3>多选框绑定一个值</h3>
<input type="checkbox" id="isTrue" v-model="isTrue" />
<label for="isTrue">{{isTrue}}</label>
<hr />
<h3>多选框绑定数组</h3>
<p>
<input type="checkbox" id="huang" value="huang" v-model="web_names" />
<label for="huang">huang</label>
<input type="checkbox" id="xiao" value="xiao" v-model="web_names" />
<label for="xiao">xiao</label>
<input type="checkbox" id="guo" value="guo" v-model="web_names" />
<label for="guo">guo</label>
</p>
<p>{{web_names}}</p>
<h3>单选框绑定</h3>
<p>
<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>
<p>你选择的性别是：{{sex}}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
message: 'hello world!',
isTrue: true,
web_names: [],
sex: '男'
}
})
</script>
</body>
</html>- v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-bind</title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js"></script>
<style type="text/css">
.classA {
color: red;
}
.classB {
font-size: 150%;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.pink {
background-color: pink;
}
</style>
</head>
<body>
<h1>v-bind</h1>
<hr />
<div class="app">
<p><img v-bind:src="imgSrc" width="200px" /></p>
<!--
完整语法
<a v-bind:href="url"></a>
缩写
<a :href="url"></a>
-->
<p>
<a :href="webUrl" target="_blank">晓果博客</a>
</p>
<hr />
<div :class="className">1、绑定Class</div>
<div :class="{classA:isOK}">2、绑定Class中的判断</div>
<div :class="[classA,classB]">3、绑定Class中的数组</div>
<div :class="isOK?classA:classB">4、绑定Class中的三元运算符</div>
<hr />
<div>
<input type="checkbox" id="isOK" v-model="isOK" />
<label for="isOK">isOK={{isOK}}</label>
</div>
<hr />
<div :style="{color: red , fontSize:font}">5、绑定Style</div>
<div :style="styleObject">6、绑定Style 对象</div>
<hr /> 通过某个字段选择样式
<ul>
<li v-for="(hero,index) in heros" :key='index'
:class="{'A':'red','B':'blue','C':'green','D':'pink'}[hero.score]">
{{hero.name}},{{hero.score}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el: '.app',
data: {
imgSrc: 'http://jspang.com/wp-content/uploads/2017/02/vue01-2.jpg',
webUrl: 'https://blog.csdn.net/huangxiaoguo1',
className: 'classA',
isOK: true,
classA: 'classA',
classB: 'classB',
red: 'red',
font: '20px',
styleObject: {
color: 'green',
fontSize: '24px'
},
heros: [{
id: 1,
name: '我试试',
score: 'A'
},
{
id: 2,
name: '我看看',
score: 'B'
},
{
id: 3,
name: '我找找',
score: 'C'
}, {
id: 4,
name: '我聊聊',
score: 'D'
}
]
}
})
</script>
</body>
</html>- v-pre&v-cloak&v-once
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>v-pre&v-cloak&v-once </title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="../js/vue.js" ></script>
</head>
<body>
<h1>v-pre&v-cloak&v-once </h1>
<hr />
<div class="app">
<!--
v-pre
原样输出
-->
<div v-pre>{{message}}</div>
<hr />
<div v-cloak>页面渲染完成后，才显示</div>
<hr />
<!--
v-once:只在第一次进行渲染，之后DOM在进行变化，不渲染了
-->
<div v-once>{{message}}</div>
<div><input type="text" v-model="message" /></div>
<div>{{message}}</div>
</div>
<script type="text/javascript">
var app=new Vue({
el:'.app',
data:{
message:'hello world!'
}
})
</script>
</body>
</html>
Vue社区为您提供最前沿的新闻资讯和知识内容
更多推荐
0
0- 0
已为社区贡献19条内容
所有评论(0)