Vue2.5 入门基础教程

1.前言

本篇文章是曾任去哪网的高级前端工程师DellLee在慕课网发布的教学课程《Vue2.5入门》而总结的笔记。原视频地址：https://www.imooc.com/learn/980
本笔记适用于新手学习vue框架进行前端的开发。

2.基础语法

2.1 模板挂载点实例之间的关系

    {{msg}}

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 :
    
{{fullName}}
    
{{count}}
 
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"

    
hello world
    toggle
    

        
{{item}}
    

4.脚手架Vue-cli

目录主要结构

build 放置的是配置文件
config 开发环境线上环境的配置文件
node_modules 依赖
src源代码
static资源文件

优势
优势则是支持Es6语法，单文件组件的形式模版，逻辑，样式 非常棒的组件模式。
注意事项：
template标签下只能有一个根元素
全局样式与局部样式
scoped 作用域 只对当前的组件有效
如果组件使用了scoped 那么子组件依旧可以使用父组件中的样式

通过vue cli实现 todolis:

父组件






子组件：