Vue第一天
基本指令
跑马灯案例
计算器案例
事件修饰符
双向绑定
样式
这是我第5遍学习Vue了（可能是因为感觉自己达不到游刃有余的感觉吧，也可能是以前学的不系统，要学就得学扎实了。）
-
创建一个实例
<script src="../../vue.min.js"></script> <div id="app"> <p>{{ title }}</p> </div> <script> let vm = new Vue({ el: '#app', data: { title: '欢迎学习Vue！' } }) </script>指令：
-
v-cloak （ 能够解决 插值表达式闪烁问题 ）
<style> [v-cloak]{ display: none; } </style> <div id="app"> <p v-cloak>{{ title }}</p> </div> -
v-text ( 功能与插值表达式相同，优点：没有闪烁问题 ，缺点：会覆盖元素中原本的内容)
<p v-text=“title”></p> -
v-html (能够解析文本里面的HTML标签)
<p v-html="msg"></p> -
v-bind（ 用于绑定属性的指令 ）(简写形式 : )
<input type="button" value="按钮" v-bind:title="mytitle"> <input type="button" value="按钮" :title="mytitle"> -
v-on ( 绑定事件 ) （简写形式 @ ）
<input type="button" value="按钮" v-on:click="alert('hello')">
<input type="button" value="按钮" @click="alert('hello')">
练习
- 跑马灯
<div id="app">
<p>{{msg}}</p>
<input type="button" value="开始" @click="start">
<input type="button" value="停止" @click="stop">
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
msg: '猥琐发育，别浪~~~~',
timer: null
},
methods: {
start() {
if (this.timer != null) return;
this.timer = setInterval(() => {
let start = this.msg.substring(0, 1)
let end = this.msg.substring(1)
this.msg = end + start
}, 200)
},
stop() {
clearInterval(this.timer)
this.timer = null
}
}
})
</script>
事件修饰符
-
stop ( 阻止冒泡 )
<div id="app"> <div class="inner" @click="DivClick"> <input type="button" value="点击" @click.stop="BtnClick"> </div> </div> <script> let vm = new Vue({ el: '#app', data: {}, methods: { DivClick() { console.log('触发了inner点击事件') }, BtnClick() { console.log('触发了按钮点击事件') } } }) </script>
-
prevent ( 阻止默认行为 )
<a href="http://www.baidu.com" @click.prevent="linkClick">去百度</a>
- capture （捕获触发事件机制）（从外向里 ）
<div class="inner" @click.capture="DivClick">
<input type="button" value="点击" @click="BtnClick">
</div>
-
self ( 只有点击当前元素才能触发事件)
<div class="inner" @click.self="DivClick"> <input type="button" value="点击" @click="BtnClick"> </div>
-
once （只触发一次事件）
<a href="http://www.baidu.com" @click.prevent.once="linkClick">去百度</a>
v-model
- 案例（计算器）
-
<div id="app"> <input type="text" v-model="n1"> <select name="" id="" v-model="opt"> <option value="+">+</option> <option value="-">-</option> <option value="*">*</option> <option value="/">/</option> </select> <input type="text" v-model="n2"> <input type="button" value="=" @click="btnClick"> <input type="text" v-model="result"> </div> <script> let vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { btnClick() { switch (this.opt) { case '+': this.result = parseInt(this.n1) + parseInt(this.n2) break case '-': this.result = parseInt(this.n1) - parseInt(this.n2) break case '*': this.result = parseInt(this.n1) * parseInt(this.n2) break case '/': this.result = parseInt(this.n1) / parseInt(this.n2) break } } } }) </script> -
代码优化（投机取巧，正式开发中尽量少用）（使用 eval，eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码）
<script> let vm = new Vue({ el: '#app', data: { n1: 0, n2: 0, result: 0, opt: '+' }, methods: { btnClick() { // switch (this.opt) { // case '+': // this.result = parseInt(this.n1) + parseInt(this.n2) // break // case '-': // this.result = parseInt(this.n1) - parseInt(this.n2) // break // case '*': // this.result = parseInt(this.n1) * parseInt(this.n2) // break // case '/': // this.result = parseInt(this.n1) / parseInt(this.n2) // break // } let codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)' this.result = eval(codeStr) } } }) </script>
Vue中使用样式
使用class样式
-
第一种方式：直接传递一个数组
<style> .red{ color: red; } .thin{ font-weight: 200; } .italic{ font-style: italic; } </style> <div id="app"> <h1 :class="['red','thin','italic']">这是h1</h1> </div> -
在数组中使用三元表达式
<div id="app"> <h1 :class="['red','thin',flag?'italic':'']">这是h1</h1> </div> <script> let vm = new Vue({ el: '#app', data: { flag:true } }) </script>或者：
<div id="app"> <h1 :class="['red','thin',{'italic':flag}]">这是h1</h1> </div> -
直接使用对象（true和false可用变量来代替）
<div id="app"> <h1 :class="{red:true,thin:true,italic:false}">这是h1</h1> </div> -
data里面定义
<div id="app"> <h1 :class="classObj">这是h1</h1> </div> <script> let vm = new Vue({ el: '#app', data: { classObj:{red:true,thin:true,italic:true} } }) </script>
使用内联样式
-
直接使用
<h1 :style="{color:'red','font-weight':200}">这是h1</h1> -
data里面调用
<div id="app"> <h1 :style="styleObj">这是h1</h1> </div> <script> let vm = new Vue({ el: '#app', data: { styleObj:{color:'red','font-weight':200} } }) </script> -
运用数组
<div id="app"> <h1 :style="[styleObj1,styleObj2]">这是h1</h1> </div> <script> let vm = new Vue({ el: '#app', data: { styleObj1:{color:'red','font-weight':200}, styleObj2:{'font-style':'italic'} } }) </script>
Vue指令之 V-for 和 key属性
-
v-for 简单实用
<div id="app"> <ul> <li v-for="item in list">{{item}}</li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { list:[1,2,3,4,5,6] } }) </script>
-
索引值：
<div id="app">
<ul>
<li v-for="(item,index) in list">{{item}}---{{index}}</li>
</ul>
</div>
-
循环对象数组
<div id="app"> <ul> <li v-for="(item,index) in list">{{item.id}}---{{item.name}}---{{index}} </li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { list: [ { id: 1, name: '张三' }, { id: 2, name: '李四' }, { id: 3, name: '王五' }, { id: 4, name: '隔壁老王' } ] } }) </script>
-
遍历对象
<div id="app"> <ul> <li v-for="(val,key,index) in user">{{key}}--{{val}}---{{index}}</li> </ul> </div> <script> let vm = new Vue({ el: '#app', data: { user: { id: 1, name: '张三', hobby:'打篮球', sex:'男' } } }) </script>
-
迭代数字
<div id="app"> <p v-for="count in 5">这是第 {{count}} 次循环</p> </div>
Vue指令之 v-if 和 v-show
- 基本使用
<div id="app">
<h3 v-if="flag">这是v-if控制的元素</h3>
<h3 v-show="flag">这是v-show控制的元素</h3>
<button @click="flag=!flag">点击</button>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
flag:true
}
})
</script>
总结
- MVC 和 MVVM 的区别
- 学习了Vue中最基本的代码结构
- 基本指令
- 事件修饰符
- v-for 要会使用 key 属性
- v-model 只能应用于表单元素