v-on:click = @click,触发一个点击事件

通过实例操作dom

v-text,输出文本

v-html，输出HTML

template  模板

注册全局组件，vue必须大写

全局样式与局部样式：

1.   在子组件里定义的样式和父组件里定义的样式不会产生冲突，因为我们在子组件里定义样式的时候给子组件写了一个scoped，意思就是定义了一个作用域。

2. 如果没有加scoped的话，第一次可能不会产生影响，但是在后续就会产生一定的影响了，所以我们在以后编写过程中，给子组件添加样式时最好加上一个scoped，这样就可以保证支队自己组件的样式有效。不加的话就会对全局有效，所以为了与其他板块相区分，增加解耦性，还是要加上。
   

Vue-cli的简介与使用 (脚手架工具)

    需要安装脚手架工具，使用npm命令，去vue官网有教程。

1. build目录下放置的是项目的webpack配置文件，可以不动
   

2. config是针对线上环境和开发环境的配置文件，也可以不动
   

3. node_modules 指的是项目的依赖

4. src 指的是源代码放置的目录

5. static放置的是静态的资源

6. src中的main.js文件是整个项目的入口文件

7. 
   

父组件和子组件通信：属性形式
父组件中通过属性向子组件传递值，子组件接受属性的内容并再子组件上进行内容显示
子组件可以绑定事件，实现子组件的删除必须删除父组件的相关数据，

子组件和父组件通信：发布订阅模式
子组件被点击需要通知父组件把数据删除，

实现删除功能的知识点：
    先写一下理解，怕忘了，我们先定义了一个大的实例，也就是大的组件，然后我们在里面没有定义template，所以根目录下的模板就是挂载点下的模板，在模板下我们定义了一个组件，那么这个组件就是子组件，大的vue实例(组件)是父组件，我们通过给父组件底下的模板定义了一个属性向子组件进行传递的值

注意点：在vue里面，父组件向子组件传值是通过属性的方式！！！

               子组件向父组件传递数据的形式是发布订阅模式，父组件监听子组件的自定义方法，也就是使用 $emit 触发父组件的自定义事件，this.$emit()方法。

    我们在子组件里面定义的模板里面所绑定的事件触发的是组件里面的方法。

    可以同这个小组件的方法里面向外面传递一个事件，如此处this.$emit('delete',this.index)，第一个参数是事件名称，第二个参数是事件对应的值，此处是事件的下标。而父组件在监听子组件的事件，监听到之后执行另外一个方法，而这个方法是父组件的，因为是定义在父组件对应的模板里面，所以是父组件的方法handleDelete

        splice方法 删除或者添加数组

组件和实例的关系

    每一个组件也是一个vue的实例。

    在template中双引号可以在里面嵌套单引号，单引号不能嵌套单引号，会出现一些问题。

    每一个项目都是由很多个组件组成的，也就是很多个vue实例组成的，因为每个组件就是vue实例，所以在组件中可以正常使用vue的一些方法，比如methods,watch等等。

每个组件都拥有自己的props、data、methods等等

注意：如果我们没有在vue根实例?下面定义模板，我们会按照挂载点寻找，并把下面的模板当作是模板。

我们可以把一个较大的项目拆分成一个个小的组件，这样维护起来就比较方便了
vue组件的定义，这里说道两种：
    全局组件：vue提供了vue.component()来定义组件，第一个参数是组件的名字，也是我们将要写在dom里的标签，第二个参数是一个对象，里面可以定义一个模板，也是我们要显示的内容。
    还有一种方式叫做局部组件，在外面定义一个对象，对象里面装着模板，但是这样还不可直接使用，我们需要在实例里面进行注册，配置标签名和内容。意思就是在我这个vue实例里面去使用这个组件。
    在标签内可以像以往一样正常使用指令。
    要想显示我们想显示的内容，我们可以进行传参，在标签里面定义属性，属性就是我们想要显示的内容然后在组件里面用props(固定)给接收过来就可以正常使用了。

侦听器某一个数据的变化，一旦发生变化就可以在侦听器里面做业务逻辑

监听一个计算属性的变化

计算机属性和侦听器

computed{对象}计算属性，当依赖的数据发生变化才会重新计算，如果依赖的数据没有发生变化，会用上一次计算的缓存显示

computed{

fullName：function(){

  return this.firstName+''+this.lastName

}

}

<input v-model="content"/>模板指令

<input v-model='content'/>

   <div>{{content}}</div>

data:{

     msg:"小狗哈士奇hah，你好吗",

title:"小狗哈士奇hah，你好吗",

                 content:"今天天气怎么样？"  

},

v-bind:title="title"

简写:title="title"          

v-bind:绑定属性 

=后面不是字符串，是js表达式，实例里的变量

属性绑定和双向数据绑定

不是面向dom编程，而是面向数据编程，当数据发生变化，页面自动发生变化

this.content    Vue下data下变量