我的vue.js 2.0学习路线是参考技术胖老师的博客,感谢！
一、hello world
以下是最简单的hello world代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走进vue2.0</title>
</head>
<body>
<h1>hello world</h1>
<hr/>
<div id="app">
{{message}}
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
message:'hello vue!'
}
})
</script>
</body>
</html>
二、v-if & v-else & v-show指令
v-if:是vue 的一个内部指令，指令用在我们的html中。
v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
v-show用来调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。
v-if 和v-show的区别：
v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-if & v-show & v-else</title>
</head>
<body>
<h1>v-if&v-show&v-else用法</h1>
<hr/>
<div id="app">
<div v-if="ifLogin">已登录</div>
<div v-else>请先登录</div>
<div v-show="ifLogin">如果已登录则显示该dom</div>
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
ifLogin:true
}
})
</script>
</body>
</html>
三、v-for指令：解决模板循环问题
v-for指令是循环渲染一组data中的数组，v-for 指令需要以 item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
以下是给数组排序并且输出数组，此处用到了vue的computed属性。我们在computed里新声明了一个对象sortItems，如果不重新声明会污染原来的数据源，这是Vue不允许的，所以你要重新声明一个对象。
完整html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<h1>v-for用法</h1>
<hr/>
<div id="app">
<ul>
<li v-for="item in sortItems">
{{item}}
</li>
</ul>
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
items:[20,23,18,65,32,19,5,56,41]
},
computed:{
sortItems:function () {
function sortNumber(a,b) {
return a-b;
}
return this.items.sort(sortNumber)
}
},
})
</script>
</body>
</html>
我们上边循环的都是数组，那我们来看一个对象类型的循环是如何输出的。
完整html代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for</title>
</head>
<body>
<h1>v-for用法</h1>
<hr/>
<div id="app">
<ul>
<li v-for="student in sortItems">
{{student.name}}-{{student.age}}
</li>
</ul>
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
students:[
{name:'jspang',age:32},
{name:'Panda',age:30},
{name:'PanPaN',age:21},
{name:'King',age:45}
]
},
computed:{
sortItems:function () {
function sortNumber(a,b) {
var x=a.age;
var y=b.age;
return x-y;
}
return this.students.sort(sortNumber)
}
},
})
</script>
</body>
</html>
四、v-text & v-html指令
如果在javascript中写有html标签，用v-text是输出不出来的，这时候我们就需要用v-html标签了。双大括号会将数据解释为纯文本，而非HTML。为了输出真正的HTML，你就需要使用v-html 指令。 需要注意的是：在生产环境中动态渲染HTML是非常危险的，因为容易导致XSS攻击。所以只能在可信的内容上使用v-html，永远不要在用户提交和可操作的网页上使用。
完整html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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>
<span v-html="msgHtml"></span>
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
message:'hello vue!',
msgHtml:'<h2>hello vue<h2/>'
},
})
</script>
</body>
</html>
五、v-on:绑定事件监听器
v-on 就是监听事件，可以用v-on指令监听DOM事件来触发一些javascript代码。
完整html代码：
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>v-on</title>
</head>
<body>
<h1>v-on用法</h1>
<hr/>
<div id="app">
本场得分：{{count}}<br>
<button v-on:click="add()">加一分</button><!--v-on的替代写法@-->
<button v-on:click="sub()">减一分</button>
<!--我们除了绑定click之外，我们还可以绑定其它事件，比如键盘回车事件v-on:keyup.enter,现在我们增加一个输入框，然后绑定回车事件，回车后把文本框里的值加到我们的count上。-->
<input type="text" v-on:keyup.enter="onEnter" v-model="secondCount">
</div>
<script src="js/vue.min.js"></script>
<script>
var vue=new Vue({
el:'#app',
data:{
count:5,
secondCount:null
},
methods:{
add:function () {
this.count++;
},
sub:function () {
this.count--;
},
onEnter:function () {
if(this.secondCount.length>0)//如果不加此判断，当输入内容为空是按回车键会得出NaN
{
this.count=this.count+parseInt(this.secondCount)
}
}
}
})
</script>
</body>
</html>
以上就是今天所学内容，我还是一枚小渣渣~希望和大家一起学习 0_0...
