VUE入门基础
VUE入门基础
vue入门基础
一、两种开发模式：
01
1、CLI# 全局安装 vue-cli npm install --global vue-cli# 创建一个基于 webpack 模板的新项目 vue init webpack my-project# 安装依赖，走你 cd my-project npm install
02
2、引入js文件
直接下载，引入js文件即可
二、Vue知识点 1、Vue所支持的指令 选择： v-if v-else v-else-if 循环： v-for 显示： v-show 绑定属性： v-bind 在vue中 绑定html属性，必须使用v-bind 缩写的形式： v-bind:src --> :src 双向数据绑定： v-model 修饰符：.lazy .number .trim <input type='number' v-model.number='num1'/> 绑定事件： v-on:click="handleClick" 缩写形式： @click=""
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<!-- 判断相关的指令-->
<button v-if="hasMore">加载更多</button>
<p v-else="!hasMore">没有更多数据可以加载了</p>
<span v-if="score > 80">优秀</span>
<span v-else-if="score > 60">及格</span>
<span v-else>不及格</span>
<h1 v-show="score > 60"> it is a test </h1>
<!-- 循环 -->
<!--
ng-repeat="item in list"
ng-repeat="(value,key) in list"
-->
<ul>
<li v-for="item in list">
{{item}}
</li>
</ul>
<ul>
<li v-for="(value,key) in car">
<p>{{"属性为"+key+" 值为 "+value}}</p>
</li>
</ul>
<!-- ng-src="img/{{url}}" -->
<!-- 在vue中绑定html属性，必须使用v-bind-->
<!--<img v-bind:src="'img/'+imgName" alt=""/>-->
<!-- v-bind有一种缩写形式-->
<!--<img :src="'img/'+imgName" alt=""/>-->
<a v-bind:href="linkUrl">Tarena</a>
<a :href="linkUrl">Tarena</a>
<hr/>
<input type="text" v-model="kw"/>
<p>{{kw}}</p>
<input type="number" v-model.number="num1"/>
<input type="number" v-model.number="num2"/>
<p>{{num1+num2}}</p>
<button v-on:click="handleClick">clickMe</button>
<button @click="handleClick">clickMe</button>
</div>
<script>
new Vue({
el:'#example',
data:{
msg:'Hello Directive',
hasMore:true,
score:70,
list:[100,200,300],
car:{
name:'WEY',
price:20
},
imgName:'1.jpg',
linkUrl:'http://www.tedu.cn',
kw:'zhangsan',
num1:10,
num2:20
},
methods:{
handleClick:function(){
console.log('btn is clicked');
}
}
})
</script>
</body>
</html>
2、自定义指令
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<!-- <select v-on:change="funcSelect">-->
<select @change="funcSelect">
<option value="r">Red</option>
<option value="g">Green</option>
<option value="b">Blue</option>
</select>
<!--提交事件触发时的修饰符：.prevent-->
<form @submit.prevent="funcSubmit">
是否同意<input type="checkbox"/>
<button>提交</button>
</form>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'Hello Directive'
},
methods:{
funcSelect:function(event){
console.log(event.target.value);
},
funcSubmit: function () {
console.log('submit event is triggered');
}
}
})
</script>
</body>
</html>
3个钩子函数： bind：绑定 update：更新 unbind：解绑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<ul v-change="count">
<li>test01</li>
<li>test02</li>
<li>test03</li>
</ul>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'Hello Directive',
count:10
},
directives:{
change:{
bind: function (el) {
console.log(arguments);
el.style.backgroundColor = '#eeeeee';
console.log('bind func is called');
},
update: function () {
console.log('update func is called');
},
unbind: function () {
console.log('unbind func is called');
}
}
}
})
</script>
</body>
</html>
4、计算属性 计算属性其实是一个方法，定义在computed属性中的方法。 计算属性的优势： ①计算属性的方法和methods中的方法实现的功能是一样的，但是由于计算属性是有计算缓存的，可以让更新更高效 ②让代码更方便进行维护 什么时候需要使用计算属性？ 方法所依赖的数据，性能开销比较大，适合用计算属性，正常情况，在methods定义方法也是可以的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<!--<p>{{步骤1，步骤2，步骤3.。。步骤5}}</p>-->
<p>{{operateMsg}}</p>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'Hello Directive'
},
computed:{
operateMsg: function () {
//实现比较复杂的业务逻辑
//步骤1
//步骤2
//步骤3
//步骤4
//步骤5
return 123
}
}
})
</script>
</body>
</html>
5、监听属性 watch：{ kw:function(newValue,oldValue){} kw2:function(newValue,oldValue){} }
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<input type="text" v-model="kw"/>
</div>
<script>
new Vue({
el: '#example',
data: {
msg: 'Hello Directive',
kw:''
},
watch:{
kw:function(newValue,oldValue){
console.log("当前的数据为"+newValue);
console.log("上一次的数据为"+oldValue);
}
}
})
</script>
</body>
</html>
6、vue中生命周期 create、mount、update、destroy 每个阶段都对应着有处理函数： beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<button @click="handleClick">clickMe</button>
<p>{{count}}</p>
</div>
<script>
var app = new Vue({
el: '#example',
data: {
msg: 'Hello Directive',
count:0
},
methods:{
handleClick: function () {
console.log(app);
this.count++;
if(this.count > 5)
{
app.$destroy();
}
}
},
beforeCreate: function () {
console.log('in beforeCreate');
},
created: function () {
console.log('in created');
},
beforeMount: function () {
console.log('in beforeMount');
},
mounted: function () {
console.log('in mounted');
},
beforeUpdate: function () {
console.log('in beforeUpdate');
},
updated: function () {
console.log('in updated');
},
beforeDestroy: function () {
console.log('in beforeDestroy');
},
destroyed: function () {
console.log('in destroyed');
}
})
</script>
</body>
</html>
7 Vue.component('my-component',{ template: }) data:... <my-component></my-component> 组件命名：建议通过烤串式的命名方式（中间有-连接起来）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<my-component></my-component>
</div>
<script>
//局部组件的创建和使用
var child = {
template:'<span> Hello Child </span>'
}
new Vue({
el: '#example',
data: {
msg: 'Hello Directive'
},
components:{
'my-component':child
}
})
</script>
</body>
</html>
8、复合组件 全局组件可以在父模板中的任何一个元素（组件）去使用， 局部组件只能够用在父模板中。 比如：局部组件 item，全局组件 my-list,my-item 可以在my-list中调用my-item，但是不可以调用item（局部组件） 当将局部组件或者全局组件放在一起构成的组件称之为复合组件。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="example">
{{msg}}
<my-list></my-list>
<item></item>
<my-item></my-item>
</div>
<script>
//创建全局组件
Vue.component('my-list',{
template:' <div><h1> it is a list</h1> ' +
' <my-item></my-item> </div>'
});
Vue.component('my-item',{
template:'<p> it is my item </p>'
})
new Vue({
el: '#example',
data: {
msg: 'Hello Directive'
},
components:{
//局部组件只能够用在当前的父模板
'item':{
template:'<span> it is a list item</span>'
}
}
})
</script>
</body>
</html>
sdzfgdhg