1.前言
本篇文章是曾任去哪网的高级前端工程师DellLee在慕课网发布的教学课程《Vue2.5入门》而总结的笔记。原视频地址：https://www.imooc.com/learn/980
本笔记适用于新手学习vue框架进行前端的开发。
2.基础语法
2.1 模板挂载点实例之间的关系
<!-- div是挂载点 el属性后面对应的标签-->
<div id="root">
{{msg}}</div>
<script>
new Vue({
el:"#root", //挂载点id
/*模板内容可以放在挂载点标签的内部*/
template:"<h1>hello {{msg}}</h1>",
data:{
msg:"hello world"
}
})
</script>
2.2 如何进行绑定事件以及绑定相关属性
点击事件
绑定事件的方法在Vue中为：v-on:click="handleClick" 简写则为@click（类似于android开发开发黄油刀框架的写法）
绑定方法写好了之后需要在Vue的实例中新建methods方法
methods:{
handleClick:function () {
this.content="world" //这里的this选择的是data下面的数据
}
}
属性绑定 v-bind:title="绑定的属性" 简写为:title
双向绑定 v-model="content"
2.3 Vue中的计算属性和侦听器
计算属性为computed通常和监听器一起出现watch
下方代码其中firstName和lastName分别对应的是一个div标签
HTML :
<div>{{fullName}}</div>
<div>{{count}}</div>
JavaScript :
new Vue({
el: "#root",
data: {
firstName: "",
lastName: "",
count:0
},
/*计算属性*/
computed:{
fullName:function () {
return this.firstName+''+this.lastName
}
},
/*监听器*/
watch:{
firstName:function () {
this.count++;
},
lastName:function () {
this.count++;
}
}
})
2.3 用来判断是否显示的v-if v-show
顾名思义，v-if 和v-show都是用来显示标签的，在这里主要说明一下他俩的区别：
v-show 是不清除DOM树的 v-if 是要清除的
v-if 控制DOM的存在 v-show 控制DOM的显示
（类似于android中view的INVISIBLE 和GONE）
2.4 用来循环的 v-for
v-for是用来控制一组数据，并且在for中key值不能相同的
基础的用法是
v-for="item of list"
如果想获取当前的index则：
v-for="(item,index) of list"
<div id="root">
<div v-show="show">hello world</div>
<button @click="handleClick">toggle</button>
<ul>
<li v-for="item of list" :key="item">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el: "#root",
data: {
show: true,
list:[1,2,3,4,5,6,7,8,9]
},
methods:{
handleClick:function () {
this.show=!this.show;
}
}
}）
3 Vue中的组件
无论是在移动开发还是web开发，组件化的方案都为庞大的项目提供便利性，在这里vue中内置了一些组件，从视频中了解的内容也是在web开发的思维上有了一些扩展。
组件与实例的关系：每个组件都是一个Vue的实例。任何一vue项目都是由一个个实例组合而成的
3.1全局组件
HTML标签中可以直接调用
<ul>
<todo-item></todo-item>
</ul>
Vue.component('todo-item',{
template:'<li>item</li>'
})
3.2 局部组件
第一步 定义这个组件的内容
var TodoItem={
template:'<li>item</li>'
} 需要在Vue实例中进行注册
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
第二步 在vue的实例中 引用刚刚定义的内容
components:{
'todo-item':TodoItem
},
methods:{
handleClick:function () {
this.list.push(this.inputValue),
this.inputValue=""
}
}
})
3.3 发布订阅模式
发布订阅模式，可以使子组建向外触发事件
this.$emit('delete',this.index)通过这种方法，对父组件进行传递。
这种子组件和父组件之间的传递对于vue是一个重点也是一个难点了。
总结：
父组件向子组件传递参数 :content
子组件向父组件传递参数 this.$emit('delete',this.index)
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleClick">�ύ</button>
<ul>
<todo-item v-for="(item,index) of list"
:key="index"
:content="item"
:index="index"
@delete="handleDelete">
</todo-item>
</ul>
</div>
</div>
<script>
Vue.component('todo-item',{
props:['content','index'],
template:'<li @click="handleClick">{{content}}</li>',
methods:{
handleClick:function () {
this.$emit('delete',this.index)
}
}
})
new Vue({
el:"#root",
data:{
inputValue:'',
list:[]
},
/* components:{
'todo-item':TodoItem
},*/
methods:{
handleClick:function () {
this.list.push(this.inputValue),
this.inputValue=""
},
handleDelete:function (index) {
this.list.splice(index,1)
}
}
})
</script>
4.脚手架Vue-cli
目录主要结构
build 放置的是配置文件
config 开发环境线上环境的配置文件
node_modules 依赖
src源代码
static资源文件
优势
优势则是支持Es6语法，单文件组件的形式模版，逻辑，样式 非常棒的组件模式。
注意事项：
template标签下只能有一个根元素
全局样式与局部样式
scoped 作用域 只对当前的组件有效
如果组件使用了scoped 那么子组件依旧可以使用父组件中的样式
通过vue cli实现 todolis:
父组件
<template>
<div>
<div id="TodoList">
<input class="item" v-model="inputValue" />
<button @click="handleSubmit">提交 </button>
<ul>
<todo-item v-for="(item , index) of list"
:key="index"
:content="item"
:index="index"
@deletee="handleDelete"
></todo-item>
</ul>
</div>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
//用cli以后 data则变成一个函数了
//data: 'inputValue',
data: function() {
return {
inputValue: '',
list: []
}
},
components: {
'todo-item': HelloWorld
},
methods: {
handleSubmit() {
this.list.push(this.inputValue)
this.inputValue = ''
},
handleDelete(index){
this.list.splice(index,1)
}
}
}
</script>
<style scoped>
.item{
color: green;
}
</style>
子组件：
<template>
<li class="item" @click="handleDelete">{{content}}</li>
</template>
<script>
export default {
props:['content','index'],
methods:{
handleDelete:function(){
this.$emit("deletee",this.index)
}
}
}
</script>
<style >
</style>
