vue.js学习（一）
一、Vue.js简介
vue.js是目前最火的前端框架
和Angular.js、React.js一起成为前端三大主流框架。
二、Vue的使用
1、引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习vUe</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--将来new的Vue实例，会控制这个元素中的所有内容-->
<div id="app">
<p>{{msg}}</p>
</div>
<script type="text/javascript">
//2、创建一个Vue实例
//当我们导入包之后，在浏览器的内存中，就多了一个Vue的函数
var vm= new Vue({
el:'#app', //表示，当前我们new的这个实例，要控制页面上的区域
data:{ //data属性中，存放的是el中要用到的数据
msg:'欢迎学习Vue' // 通过Vue提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作
// Dom元素了。
}
})
</script>
</body>
</html>
三、v-cloak、v-text、v-html的学习
1.使用v-cloak能够解决差值表达式闪缩的问题、而v-text是没有闪烁问题的
2.v-text会覆盖元素中原本的内容，但是差值表达式只会替换自己的占位符，不会把整个元素的内容清空
3.v-html把内容当作html解析
测试的时候将网速调成slow-3G
[v-cloak]{
display: none;
}
<p v-cloak>{{msg}}</p>
网速即使是很慢的时候用户也看不到页面的msg
四、V-bind、V-on的学习
v-bind:是Vue中，提供的用于绑定属性的指令
var vm= new Vue({
el:'#app', //表示，当前我们new的这个实例，要控制页面上的区域
data:{ //data属性中，存放的是el中要用到的数据
mytitle:'这是一个title'
}
})
<input type="button" v-bind:title="mytitle" value="按钮" />
<!--v-bind:指令可以简写为: 要绑定的属性-->
<!--v-bind中，可以写合法的js表达式--
<input type="button" v-bind:title="mytitle+'123'" value="按钮" />
v-on：事件绑定机制 其缩写为@
<input type="button" value="按钮" v-on:click="show"/>
var vm= new Vue({
methods:{
show:function(){
alert("123")
}
}
})
跑马灯案例``
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跑马灯效果</title>
<!--1、导入Vue包-->
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--2、创建一个要控制的区域-->
<div id="app">
<input type="button" value="雄起" @click="lang" />
<input type="button" value="低调" @click="stop" />
<h4>{{msg}}</h4>
</div>
<script>
//注意:在vm实例中，如果想要获取data上的数据，或者想要调用methods中的方法 必须通过this。数据属性名或者
//this.方法名来进行访问,这里的this,就表示我们new出来的vm实例对象
var vm = new Vue({
el: '#app',
data: {
msg: '前端奥利给!----',
intervarId: null
},
methods: {
lang() {
if(this.intervarId != null) return;
this.intervarId = setInterval(() => {
// console.log(this.msg)
//获取到头的第一个字符
var start = this.msg.substring(0, 1)
//获取到后面的所有字符
var end = this.msg.substring(1)
//重新拼接得到的新字符串,并赋值给this.msg
this.msg = end + start
}, 400)
//注意: Vm实例中,会监听自己身上的data 中的所有数据的改变,只要数据一法生变化,就会自动
//把最新的数据，从data上同步到页面中：【好处：程序员只需要关心数据，不用关心渲染
},
stop() {
//停止计时器
clearInterval(this.intervarId)
this.intervarId = null
}
}
})
//分析:
//1.给雄起按钮 绑定一个点击事件 V-on @
//2. 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后调用字符串的substring
// 来进行字符串的截取操作，把第一个字符截取出来，放到最后一个位置即可
// 3.为了实现点击下按钮，自动截取的功能，需要把2步骤中 放到一个定时器中
</script>
</body>
</html>
事件修饰符
.stop阻止冒泡
.prevent 阻止默认事件
.capture捕获机制
.self实现只有点击当前元素，才会触发事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.inner {
background: brown;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<!--@click.stop阻止冒泡-->
<!--<div class="inner" @click="div1Handler">
<input type="button" value="点我吖" @click.stop="btnHandler"/>
</div>-->
<!--prevent 阻止默认事件-->
<a href="http://www.baidu.com" @click.prevent="linkClick">百度一下</a>
<!--@click.capture捕获机制-->
<!--<div class="inner" @click.capture="div1Handler">
<input type="button" value="点我吖" @click="btnHandler"/>
</div>-->
<!--使用.self实现只有点击当前元素，才会触发事件-->
<div class="inner" @click.self="div1Handler">
<input type="button" value="点我吖" @click="btnHandler" />
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
},
methods: {
div1Handler: function() {
console.log('inner div')
},
btnHandler: function() {
console.log('btn 按钮')
},
linkClick: function() {
console.log('a 按钮')
}
}
})
</script>
</body>
</html>
Vue指令之v-model和双向数据绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
.inner {
background: brown;
height: 200px;
}
</style>
</head>
<body>
<div id="app">
<h4>{{msg}}</h4>
<!--v-bind 只能实现数据的单向绑定 从M 自动绑定到V -->
<!--<input type="text" :value="msg" />-->
<input type="text" v-model="msg" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
msg: '前端的集合-----'
},
methods: {
}
})
</script>
</body>
</html>
简易计算器案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="n1" />
<select 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="calc" />
<input type="text" v-model="result" />
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
n1: 0,
n2: 0,
result: 0,
opt: '+'
},
methods: {
calc() {
// 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;
// default:
// break;
// }
// 投机取巧方式 不建议使用
var codeStr = 'parseInt(this.n1)' + this.opt + 'parseInt(this.n2)'
this.result = eval(codeStr)
}
}
})
</script>
</body>
</html>
Vue中通过属性绑定为元素设置class类样式
1、数组 ：大的大的很
2、数组中使用三元表达式大的大的很
3、数组中使用对象大的大的很
4、直接使用对象 大的大的很
学习Vue
大的大的很
使用内联样式绑定样式
1、直接在元素上通过 :style的样式大的大的很
2、将样式对象直接定义到data中，并直接引用到 :style 中data: { styleObj:{color:'red','font-weight':300} },
3、在style中通过数组，引用多个data上的数据对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--注意如果样式带有- 必须要加引号-->
<h1 :style="[styleObj1,styleObj2]">---大的大的很--</h1>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
styleObj1:{color:'red','font-weight':300},
styleObj2:{'font-style':'italic'}
},
methods: {
}
})
</script>
</body>
</html>
Vue指令之v-for和key属性
1、循环普通数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-for="item in list">{{item}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [1, 2, 3, 4, 5, 6]
},
methods: {
}
})
</script>
</body>
</html>
2、循环对象数组
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-for="user in list">{{user.id}}----{{user.name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
list: [
{id: 1,name : 'zs1'},
{id: 2,name : 'zs2'},
{id: 3,name : 'zs3'},
{id: 4,name : 'zs4'}
]
},
methods: {
}
})
</script>
</body>
</html>
3、for循环对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--注意：在遍历对象身上的键值对的时候，除了有 val,key 在第三个位置还有索引-->
<p v-for="(val,key,i) in user">{{val}}----{{key}}---{{i}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
user:{
id:1,
name:'yuyu',
gender:'女'
}
},
methods: {
}
})
</script>
</body>
</html>
4、v-for迭代数字
<!--注意：如果使用v-for迭代数字的话，前面的count值从1开始-->
<p v-for="count in 10">{{count}}</p>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!--注意：如果使用v-for迭代数字的话，前面的count值从1开始-->
<p v-for="count in 10">{{count}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
},
methods: {
}
})
</script>
</body>
</html>
V-for中key属性的注意事项
注意:v-for 循环的时候，key属性只能使用number获取string
在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果v-for有问题
必须在使用v-for的时候，指定唯一的字符串/数字 类型：key值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div>
<label>Id:
<input type="text" v-model="id"/>
</label>
<label>Name:
<input type="text" v-model="name"/>
</label>
<input type="button" value="添加" @click="add" />
</div>
<p v-for="item in list:key="item.id"> >{{item.id}}---{{item.name}}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
id: '',
name: '',
list: [{
id: 1,
name: 'bei'
},
{
id: 2,
name: 'cheng'
},
{
id: 3,
name: 'san'
},
{
id: 4,
name: 'niang'
},
]
},
methods: {
add() {
this.list.push({
id: this.id,
name: this.name
})
}
}
})
</script>
</body>
</html>
V-if和V-show的使用
v-if特点 每次都会重新删除创建元素
v-show特点 每次不会重新进行Dom的创建操作，只是切换了display:none样式、
v-if 有较高的切换性能消耗
v-show 有较高的初始渲染消耗
如果元素涉及到频繁的切换 最好 不好使用v-if 而是推荐使用v-show
如果元素可能永远不会被用户看到， 推荐使用v-if
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>学习Vue</title>
<script src="https://vuejs.org/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="toggle" @click="flag=!flag" />
<h2 v-if="flag">我是h2</h2>
<h2 v-show="flag">我是h2</h2>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
flag:true
},
methods: {
}
})
</script>
</body>
</html>