Vue 学习笔记之一起步
1.起步
创建一个html，然后通过如下方式引入 Vue：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1.1HelloWorld：
<div id="app">
<p>{{ msg }}</p><!-- {{}}插值表达式-->
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'Hello Vue!'
}
})
</script>
以上就成功创建了第一个Vue应用！Vue将数据和DOM之间建立了关联，所有东西都是响应式的。打开控制台修改msg的值，你将看到上例相应地更新。
除了文本插值，我们还可以像这样来绑定元素特性：
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
<script type="text/javascript">
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
</script>
v-bind特性被称为指令。指令带有前缀 v-以表示它们是 Vue 提供的特殊特性。该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message属性保持一致”。
v-text与v-cloak:
<style>
[v-cloak]{
display: none;
}
</style>
<div id="app">
<p v-cloak>{{ msg }}</p>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'Hello World'
}
})
使用v-cloak时当网速较慢时不会将插值表达式{{ msg }}显示出来,只有当加载完毕时才会渲染到页面上，且使用v-cloak时可以在插值表达式两侧写其他内容并且会显示到页面上
<div id="app">
<p v-cloak></p>
</div>
结果为：
左边-------- Hello World 右边+++++++++++
但是如果使用v-text则不需要写样式，直接绑定即可解决问题，但是标签中不能写任何内容，否则会被覆盖
<div id="app">
<p v-text="msg"></p>
<p v-text="msg">Hello World</p>
</div>
如上其中第一个p标签和第二个p标签显示的内容是一样的Hello World并不会被显示出来
v-text和插值表达式共同点是：
其内容都会被当做文本来解析，即使内容是html格式
如果想把内容当作html来解析则使用v-html,同样v-html标签体中的内容也不会显示
<div id="app">
<div v-html="msg">哈哈哈哈哈哈</div>
</div>
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>这是一个大大的H1</h1>'
}
})
1.2条件循环v-if与v-for：
条件：
控制元素是否显示：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
<script type="text/javascript">
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
</script>
当seen为true时会将p标签显示出来，为false时之前显示的消息消失了。
v-show与v-if功能一样可以控制隐藏与显示，但是不同点是v-if每次都会重新删除或者创建元素，而v-show则不会每次都进行DOM的删除和创建操作只是添加了display:none样式
v-if有较高的切换性能消耗v-show有较高的初始化渲染消耗
如果元素涉及到频繁的切换，最好不要使用v-if,如果元素可能永远也不会被显示出来被用户看到则推荐使用v-if
循环：
v-for 指令可以绑定数组的数据来渲染一个项目列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
<!-- 也可以获得序号-->
<li v-for="(todo,i) in todos">
索引值：{{i}}--->元素：{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
可以看到：
1. 学习 JavaScript
2. 学习 Vue
3. 整个牛项目
在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
v-for遍历对象
<div id="app-4">
<p v-for="(value,key) in user">
{{key}}:{{value}}
</p>
</div>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
user:{
id:'1',
name:'zhangsan',
sex:'男',
age:'18'
}
}
})
</script>
运行结果：
id:1
name:zhangsan
sex:男
age:18
在遍历对象的键值对时除了 value ,key在第三个位置还有一个索引
v-for="(value,key,index) in user"
v-for迭代数字
<div id="app-4">
<p v-for="count in 10">
这是第 {{count}} 次循环
</p>
</div>
count迭代从1开始
v-for中key的使用
使用key来强制数据关联
<div id="app-4">
<label>id:<input type="text" v-model="id"/></label>
<label>name:<input type="text"v-model="name"/></label>
<button type="button" @click="add">添加</button>
<!-- 注意：v-for循环的时候，key属性只能使用number获取string-->
<!-- 注意：key在使用的时候，必须使用v-bind属性绑定的形式指定key的值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox"/>{{item.id}}-{{item.name}}
</p>
</div>
<script type="text/javascript">
var app4 = new Vue({
el: '#app-4',
data: {
list:[
{id:1, name:'赵高'},
{id:2, name:'嬴政'},
{id:3, name:'李斯'},
{id:4, name:'荀子'}
]
},
methods:{
add: function(){//添加方法
this.list.push({id:this.id, name: this.name});
}
}
})
</script>
1.3数据绑定v-bind
<div id="app-2">
<span v-bind:title="message">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString()
}
})
v-bind是vue中提供的用于绑定属性的指令，v-bind可以简写为:要绑定的属性，v-bind中还可以写合法js表达式如：
<div id="app-2">
<span v-bind:title="message + 'hellod world'">
鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
</div>
1.4事件绑定v-on
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
注意reverseMessage方法中，我们不用直接操作DOM即可更新状态
除了v-on:click,v-on事件可以绑定：
mouseenter
mouseleave
等事件
v-on事件缩写：@事件名
事件修饰符：
- .stop阻止冒泡
- .prevent阻止默认事件
- .capture添加事件侦听器使用事件捕获模式
- .self只当事件在该事件本身（比如不是子元素）触发时触发回调
- .once事件只触发一次
1.5事件修饰符案例：
<div id="app">
<div class="innder" @click="divhandler">
<button type="button" @click="btnhandler">戳他</button>
</div>
</div>
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app',
data:{
},
methods:{
divhandler:function(){
console.log('这是触发了inner div的点击事件')
},
btnhandler:function(){
console.log('这是触发了 btn 按钮的点击事件')
}
}
})
运行结果：(冒泡机制限制性当前的事件再往外冒)
这是触发了 btn 按钮的点击事件
事件修饰符.html:29 这是触发了inner div的点击事件
如果想要阻止冒泡则在@click上加.stop：
<div id="app">
<div class="innder" @click="divhandler">
<button type="button" @click.stop="btnhandler">戳他</button>
</div>
</div>
执行结果(阻止了事件向外冒泡)：
这是触发了 btn 按钮的点击事件
阻止默认行为.prevent
<div id="app-2">
<a href="www.baidu.com" @click="linkClick">点我到百度</a>
</div>
如上点击会跳转到百度，如果想阻止a标签的默认跳转事件则：
//创建vue实例得到ViewModel
var vm = new Vue({
el:'#app-2',
data:{
},
methods:{
linkClick:function(){
alert("弹出");
}
}
})
capture
.capture机制即捕获机制，与冒泡机制相反，事件从往里执行
self
.self机制只触发本身的事件，既不事件冒泡也不捕获，只会阻止自己身上冒泡行为的触发而不会影响其他元素的事件
once
使用.once，事件只触发一次
1.6简单案例：跑马灯效果
<div id="app">
<input type="button" value="浪起来" @click="lang"/>
<input type="button" value="低调"@click="stop"/>
<h4>{{ message }}</h4>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'猥琐发育，别浪！',
intervalId:null//在data上定义定时器id
},
methods:{
lang: function() {
//注意在vm实例中想要获取data上的数据,或者想要调用methods中的方法
//必须要使用this来进行访问
var that = this;//解决内部访问问题
//在开启之前先将之前开启的定时器关闭,避免重复开启
clearInterval(this.intervalId)
that.intervalId = setInterval(function(){
//截取第一个字符串
var start = that.message.substring(0,1);
//截取剩下的字符串
var end = that.message.substring(1);
//拼接剩下的字符串
that.message = end + start;
},400)
//vue会监听自己身上data中所有数据的改变,只要数据发生变化,就会自动更新DOM
},
stop:function() {
clearInterval(this.intervalId)
}
}
})
/*
分析:
1.给【浪起来按钮】绑定一个点击事件：v-on
2.在按钮的事件处理函数中，写相关的业务逻辑代码：拿到message字符，然后
调用字符串的substring来进行字符串截取操作，把第一个字符截取出来，放到最后
一个位置即可
3.为了实现点击一下按钮自动截取的功能需要2步骤中的代码，放到一个定时器中
*/
</script>
1.7v-model指令：
v-bind只能实现数据的单项绑定，从M自动绑定到V，无法实现数据的双向绑定
v-model它能轻松实现表单输入和应用状态之间的双向绑定。
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
注意v-model只能运用在表单元素中
input(radio,text,address,email...)
select
checkbox
textarea
1.8v-model简易计算器
<div id="app">
<input type="text" v-model="n1" />
<select v-model="opration">
<option value ="+">+</option>
<option value ="-">-</option>
<option value ="*">*</option>
<option value ="/">/</option>
</select>
<input type="text" v-model="n2" />
<input type="button" value="=" @click="sulotion"/>
<input type="text" v-model="result" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
n1:0,
n2:0,
result:0,
opration:'+'
},
methods:{
sulotion:function(){//计算器计算方法
//逻辑
sulotion:function(){//计算器计算方法
var codeStr = 'parseInt(this.n1)'+ this.opration +'parseInt(this.n2)'
this.result = eval(codeStr);
}
}
}
})
</script>
1.9在Vue中使用样式
1.数组方式:class="['thin','red','i']"
<style type="text/css">
.red{
color: red;
}
.thin{
font-weight: 200;
}
.i{
font-style: italic;
}
.active{
letter-spacing: 0.5em;
}
</style>
<div id="app">
<h1 :class="['thin','red','i']">这是一个h1，测试vue中使用样式</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
method:{
}
})
</script>
2.在数组中使用三元表达式：:class="['thin','red',flag?'active':'']"
<div id="app">
<h1 :class="['thin','red',flag?'active':'']">这是一个h1，测试vue中使用样式</h1>
</div>
其中flag是data中定义的变量
3.在数组中使用对象代替三元表达式提高可读性{'active':flag}
<h1 :class="['thin','red',{'active':flag}]">这是一个h1，测试vue中使用样式</h1>
4.直接使用对象：
:class="{'thin':true,'red':true,'active':true}"
<h1 :class="{'thin':true,'red':true,'active':true}">这是一个h1，测试vue中使用样式</h1>
5.间接绑定：
<div id="app">
<h1 :class="classObj">这是一个h1，测试vue中使用样式</h1></div>
var vm = new Vue({
el:'#app',
data:{
classObj:{'thin':true,'red':true,'active':true}
}
})
6.使用style
也可以间接绑定
<div id="app">
<h1 :style="{color:'red', font-weight:'200' }">这是一个h1，测试vue中使用样式</h1></div>