Vue.js初学笔记
Posted GeekerNote
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue.js初学笔记相关的知识，希望对你有一定的参考价值。
Vue.js初学
因为听说Vue.js是最容易上手的热门SPA框架，所以笔者试着借助B站某up主翻录上传的《【web前端】传智 2018 vue.js基础+项目实战》视频教程的思路，边学习边练习，期望尽早入门。此处贴出练习代码和注解以及一部分的自我理解，希望对跟我一样的新手有入门方面的帮助。
1.变量输出和事件绑定处理
<!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>Document</title>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<div id="app"> <!-- 一个由Vue接管的区域 -->
<p>{{message}}</p><!-- 使用Vue的系统指令来输出变量 -->
<button v-on:click="change">改变值</button><!-- v-on指令绑定和处理元素的事件 -->
</div> <!-- /一个由Vue接管的区域 -->
<script>
//实例化一个Vue对象
var v = new Vue({
el:"#app",//el指定Vue接管区域的标签
data:{//data中指定变量存储各种数据
message:"Hello Vue.js"
},
methods:{//methods下存储各种函数，用于事件处理或其他调用
change:function(){
this.message += "1";
}
}
})
</script>
</body>
</html>
Vue在此处可以理解为将一个HTML代码区块对应了一个类的实例（也就是一个对象），通过代码区块内特殊指令的识别处理实现数据变量的读写‘双向绑定以及事件的绑定、映射。
2.v-text和v-html
v-text和v-html两者就像是DOM操作中的innerText和innerHTML一样，一个输出纯文本一个输出渲染HTML。
<div id="app">
<span v-text="message"></span><!--v-text：输出纯文本-->
<span v-html="message"></span><!--v-html：输出html-->
<button v-on:click="change">改变值</button>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
message:"<h2>Hello Vue.js<h2>"//当变量中有HTML标签
},
methods:{
change:function(){
this.message += "1";
}
}
})
</script>
3.v-bind标签属性赋值
笔者的理解：双花括号变量名的写法适合于输出到HTML DOM的text节点（也就是HTML标签之外的文本部分），v-text和v-html属性所做的是类似的操作，而当你想要将变量的值放到HTML标签的属性中去时，就需要使用v-blind:标签属性名的写法。
<div id="app">
<input type="button" v-bind:value="message"><!--v-bind为标签属性赋值Vue中设定的变量-->
<input type="button" :value="message"><!--v-bind简写法-->
</div>
<script>
var v = new Vue({
el:"#app",
data:{
message:"Hello Vue.js"
}
})
</script>
4.v-model数据双向绑定
既然让HTML代码区块对应了Vue对象实例，那么好的做法是DOM中的数据与该对象实例中的数据始终保持一致：无论是在像表单元素这样的DOM中输入，还是脚本动态改变都及时的反映到Vue对象实例的相应变量上，而Vue对象实例的相应变量值的改变会实时更新到DOM的表现中——这就是数据双向绑定吧！
对于数据双向绑定的具体实现不是很清楚，但是这样的特性的确可以减少DOM操作的代码书写。
<div id="app">
<form action="#">
用户名：<input type="text" v-model="user.uname"><br><!--v-model实现数据双向绑定-->
密码：<input type="password" v-model="user.upwd"><br>
<input type="submit" value="注册" v-on:click="userSubmit">
</form>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
user:{//基于JS的优势，data内部的成员可以是一个对象
uname:"",
upwd:""
}
},
methods:{
userSubmit:function(){
alert(this.user.uname + " pwd:" + this.user.upwd);//this代表当前vue实例对象
}
}
})
</script>
5.v-for遍历输出数组
v-for适用于数组的遍历输出。
5-1.输出普通的数组
<div id="app">
<ul>
<li v-for="itm in list">{{itm}}</li><!--输出数组元素-->
</ul>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
list:[1,2,3,4]
}
})
</script>
5-2.输出index
<div id="app">
<ul>
<li v-for="(itm,index) in list">{{index}}-{{itm}}</li><!--输出index-->
</ul>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
list:[1,2,3,4]
}
})
</script>
5-3.输出对象数组元素的key-value
如果v-for的数组元素是特定结构的对象，可以使用如下的方式进行遍历输出。
<div id="app">
<ul>
<li v-for="(itm,key) in user">{{key}}-{{itm}}</li><!--输出key-value-->
</ul>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
user:{name:"张三",sex:"男"}
}
})
</script>
6.v-if和v-show
v-if判断变量或表达式是否为true,true渲染该DIV，false则不渲染该DIV或DON中移除该DIV
v-show通过判断来控制该DIV的display属性为true或false，实现元素根据条件显示或隐藏
<div id="app">
<div v-if="isshow">显示DIV内容</div><!-- v-if判断变量或表达式是否为true,true渲染该DIV，false则不渲染该DIV或DON中移除该DIV -->
<div v-show="isshow">DIV2</div><!-- v-show通过判断来控制该DIV的display属性为true或false，实现元素根据条件显示或隐藏 -->
<button @click="toggle">显示隐藏</button>
</div>
<script>
var v = new Vue({
el:"#app",
data:{
isshow:true,
},
methods:{
toggle:function(){
this.isshow = !this.isshow;//isshow取反
}
}
})
</script>
以上是关于Vue.js初学笔记的主要内容，如果未能解决你的问题，请参考以下文章