vue的使用

vue的使用
methods的小结
1. 使用v-on:xxx或@xxx绑定事件，其中xxx是事件名
2. 事件的回调需要配置在methods对象中，最终会在vm上
3. methods中配置的函数，==不要用箭头函数！==否则this就不是vm了
4. methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
5. @click="demo和@click="demo($event)"效果一致，但后者可以传参
Vue中的事件修饰符总结：
1. prevent：阻止默认事件（常用）
2. stop：阻止事件冒泡（常用）
3. once：事件只触发一次（常用）
4. capture：使用事件的捕获模式
5. self：只有event.target是当前操作的元素时才触发事件
6. passive：事件的默认行为立即执行，无需等待事件回调执行完毕
修饰符可以连续写，比如可以这么用：@click.prevent.stop="showInfo"

{{item}}--{{index}}

在将来的项目中写v-for是需要加上:key 他的值可以写索引最好写数据中的id值

bmustache表达式写法
```
"app">
			<h2>{{firstName}}-{{lastName}}h2>
			<h2>{{firstName+'-'+lastName}}h2>
			<h2>{{count*2}}h2>
		
```
<script>
const vm = new Vue({
el:'#app',
data(){
return {
firstName:'zhang',
lastName:'san',
count:2
}
}
})
script>

vue的常用指令 v-for


"app">
			<h2>{{todolists}}h2>
			v-for="数组或对象中的每一个值 in/of 数组或对象本身"
			
			
 
			
			
			
			
			
			
			
			
			
			<h2 v-for="item in obj2" :key="item.id">{{item.a}}{{item.b}}{{item.c}}h2>

<script>

			const vm = new Vue({

el: '#app',

data() {

return {

						todolists: ['篮球', '排球', '羽毛球', '足球'],

obj: {

a: '张三',

b: '李四',

c: '王五'

},

obj2: [{

id:1,

a: '张三',

}, {

id:2,

b: '李四',

}, {

id:3,

c: '王五'

}]

}

})

script>

vue的常用指令 v-once


"app">
			<h2>{{msg}}h2>
			<h2 v-once>{{msg}}h2>

"app"> <h2>{{message}},啧啧啧h2> <h2 v-text="message">,啧啧啧h2> <script> const vm = new Vue({ el:'#app', data(){ return { message:"你好啊" } } }) script>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> <style> [v-cloak]{ display: none !important; } style> head> <body> <div id="app" v-cloak> <h2>{{msg}}h2> div> <script> setTimeout(() => { const vm = new Vue({ el: '#app', data() { return { msg: '我就是这么倔强' } } }) }, 200) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> head> <body> <div id="app"> <img :src="src" /> <img :src="url" /> div> <script> const vm = new Vue({ el:'#app', data(){ return { src:'https://cn.bing.com/th?id=OIP.NaSKiHPRcquisK2EehUI3gHaE8&pid=Api&rs=1', url:'img/6.png' } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> <style> .active { color:#f00; } style> head> <body> <div id="app"> <h2 :class="changeActive()" @click="change">{{msg}}h2> div> <script> const vm = new Vue({ el:'#app', data(){ return { msg:'动态绑定对象', isactive:false } }, methods:{ change(){ this.isactive = !this.isactive }, changeActive(){ return {active:this.isactive} } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> <style> .active { color: #f00; } style> head> <body> <div id="app"> <ul> <li v-for="(item,index) in movies" :key="index" :class="currentIndex==index?'active':''"@click="change(index)">{{item}}li> ul> div> <script> const vm = new Vue({ el: '#app', data() { return { currentIndex: 0, movies: ["海王", "海贼王", "火影忍者", "复仇者联盟"] } }, methods: { change(i) { /* this.currentIndex = i */ if (this.currentIndex == i) return this.currentIndex = i } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> head> <body> <div id="app"> <h2 :class="['active','aaa']">我们正在学习vueh2> <h2 :class="[active,aaa]">我们正在学习vueh2> <h2 :class="getStyle()">我们正在学习vueh2> div> <script> /* 数组中加引号和不加引号有区别加引号:表示字符串是固定的, 不加引号:表示变量是不固定的 */ const vm = new Vue({ el:'#app', data(){ return { active:'isactive', aaa:'bbb' } }, methods:{ getStyle(){ return [this.active,this.aaa] } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> head> <body> <div id="app"> <h2 :style="{fontSize:'50px'}">我们爱学习h2> <h2 :style="{fontSize:fontsize}">我们爱学习h2> <h2 :style="getStyle()">我们爱学习h2> div> <script> const vm = new Vue({ el:'#app', data(){ return { fontsize:40+'px' } }, methods:{ getStyle(){ return {fontSize:this.fontsize} } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> head> <body> <div id="app"> <h2 :style="[baseStyle]">我们爱学习h2> <h2 :style="['baseStyle']">我们爱学习h2> <h2 :style="getStyle()">我们爱学习h2> div> <script> const vm = new Vue({ el:'#app', data(){ return { baseStyle:{background:'#f00'} } }, methods:{ getStyle(){ return [this.baseStyle] } } }) script> body> html>

DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>title> <script src="js/vue.js" type="text/javascript" charset="utf-8">script> head> <body> <div id="app"> <button type="button" @click="add">+button> <h3>{{count}}h3> <button type="button" @click="sum">-button> div> <script> /* 点击事件 v-on 监听事件 */ const vm = new Vue({ el:'#app', data(){ return { count:0 } }, methods:{//以后所有的vue中的方法都可以写在methods里面 /* add:function(){ console.log('add'); }, sum:function(){ console.log('sum'); } */ add(){ /* console.log(this); */ this.count++ }, sum(){ this.count-- } } }) /* 1.v-on 2.methods 3.es5和es6函数的写法 4.v-on:click 简写 @click */ script> body> html>

{{item}}--{{index}}

bmustache表达式写法