Vue.component 创建组件的方法，这种方法定义的组件是全局组件，在任何地方的模板都可以使用

局部组件
var xxx = {template：}

局部组件 在父组件的模板里调子组件是无法调用的，如果要在外部的vue实例模板里调用，需要在vue实例里使用components里进行注册。

可以在组件里用：content进行传参

外层向组件传参 组件里需要有一个属性props能够接收，（组件接收从外部传进来的一个叫做content的属性，改代码意为）

 函数定义在method里
v-show 并没有从dom树里移除，只是display=none 控制显示与否

v-if 对应数据项是false的时候 会把元素从dom树里移除 控制存在与否
v-for 用于循环展示一组数据 
<lic v-for="item of list"> 循环list里的每一项，把对应的循环项的内容放到item变量里去
加上key值 增强渲染的性能 要求key值每一个都不一样 （如果要对列表进行排序之类的 用index也不合适）

在vue实例里的computed里定义计算属性
侦听器：watch 侦听某一个数据变化

双向数据绑定指令：v-model

属性绑定：v-bind 简写为：

v-on  可以简写为 @

{{}}插值表达式

v-text 指令：/v-html：

绑定事件：
v-on：向这个div标签上绑定一个事件
v-on：click=事件方法名 绑定一个click事件

this.content指的是vue实例里data里的content的内容

挂载点：vue实例el属性对应的dom节点 vue只会去处理挂载点下面的内容
模板：挂载点内部的内容/vue实例 里template属性里

组件的使用，，，，，，，，，

todolist的删除功能

在vue中，父组件向子组件传值是通过属性的形式进行值的传递

子组件数据的删除，要从父组件里把渲染子组件的数据删除，子组件才不会显示

实现子组件和父组件的通信模式---发布订阅模式

：index="index"  循环的下标

props：["content","index"]  意味着子组件可以从父组件接收到content和index下标两个属性

当子组件被点击时，需要通知父组件对子组件数据进行删除

this.$emit('delete', this.index) 触发delete自定义事件

 $emit向外触发了事件，子组件向外部进行了发布，

传递组件index的值，this.index获取当前组件的下标值

父组件在模版创建子组件的时候监听子组件向外触发delete事件，

父组件监听到子组件delete事件后，执行一个handleDelete函数

在父组件Vue实例methods中写handleDelete方法，alert（‘delete’）

父组件可以接受到子组件传过来的下标参数

将父组件里面list对应下标的内容删除

this.list.splice(index,1) 删除对应下标内容的一项

组件与实例

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

每一个vue项目都是由千千万万个vue实例组成

大的vue实例template=''模版为空，vue实例会对应一个根实例，找到挂载点root   el:"#root"

id="root"标签下所有内容当做这个大vue实例模版使用

todolist组件拆分

Vue.component  //全局组件

template //模版

var TodoItem = {template:'<li>item</li>'}  //局部组件

<todo-item></todo-item>无法直接调用局部组件

需要在vue实例注册定义一个components：{'todo-item'=TodoItem}

v-for循环局部组件 

对todo-item传参  :content="item"

接受属性：   props:['content']    小组件接收外部传来的叫content的属性

todolist功能开发

input框输入的内容点击提交后，内容会显示在ul的li标签中

首先对input框内容进行处理 v-model="inputValue"

在vue实例里定义一个数据data 对象inputValue:' ' 双向绑定

data定义一个空数组list[]

li标签用v-for循环 li标签的内容用插值表达式

在button上绑定点击事件

定义handleclick函数

this.list.push(this.inputValue)往数组里面添加数据（数据是input框的内容）

输入内容后希望input框回到清空状态

this.inputValue= ' ' input框的值为空

v-if 

vue实例内定义一个数据show：true(默认值)

加进在显示标签<div v-if= "show">内

当show是true的时候 div的值才存在 为false的时候 div不在页面上存在

对按钮进行绑定<button@click="handleClick">toggle</button>

handleClick事件函数定义在methods方法内，this.show=！this.show（取反）

v-show（性能更佳 不会反复创建清除）

v-show="show"同样也能做到上述效果；但是dom结构变化不同

当v-if对应数据项值是false的时候，会将整个<div>标签移除

当v-show对应数据项值是false的时候，<div>标签会被隐藏（display：none），而不会被清除

v-for

数据项内定义列表[]，在页面上循环展示列表数据 展示在<ul>中

<li>标签

<li v-for="item of list"  :key="">{{item}}</li>

循环list数据项 每次循环对应的循环项放到item变量 最后输出item这个变量

使用v-for时加一个key属性，提升渲染效率，key值要求每一项都不相同

<li v-for="(item,index) of list"  :key="">{{index}}</li>

如果频繁对列表进行变更时不建议使用index作为key值

vue中的计算属性和侦听器

<input v-model="firstName"/>

<input v-model="lastName"/>两个双向数据绑定输入框

<div>{{fullName}}</div>输出文本 fullName是一个计算属性

fullName变量是通过firstName和lastName计算而成的变量

计算属性在vue实例配置对象里面写入computed对象

在里面定义fullName：function(){} 对应的函数 返回 return this.firstName+' ' +this.lastName这个数据

好处：firstName和lastName这两个值没变化的时候，fullName会继续采用之前的缓存值，至于当firstName和lastName其中一个值变化的时候fullName才会重新进行计算。

侦听器

data内定义一个变量count：0（默认值）

当上述文本任一变化时，计算属性重新计算后，count值会+1

在vue实例内定义一个侦听器watch

首先，监听firstName的变化：若firstName发生改变，那么this.count ++   count的值+1

同时，监听lastName的变化：若lastName发生改变，那么this.count ++   count的值+1

更简便的监听方法是直接监听fullName

属性绑定和双向数据绑定

title="内容"  HTML的属性  当鼠标放在页面时会出现的提示语

希望提示语可变 不是固定的

那就将title写在vue实例中

属性绑定：v-bind:title="title"   数据项的title和上面属性title进行数据绑定

""引号内的内容不再是字符串，而是一个表达式

在编码时冒号(:)一般表示v-bind： 所以 编码简写成:title

双向数据绑定

<input  :value="content"/> 改变的是input框内的值 content值没有发生改变

<input  v-model="content"/>  input框值变化的时候 数据也变化 content值也变化

1.引入vue.js写在<script></script>内

<script src="./vue.js"></script>

2.模版写在挂载点内，vue实例内

3.数据、事件、方法

{{ }}插值表达式

v-text="" 输出转译的标签 <h1>hello</h1>

v-html=""输出未转译的标签 hello

给标签绑定事件 事件监听 用于监听DOM事件 v-on 简写符号是@

点击事件  v-on:click="handleclick函数"     一般用@click

函数在methods方法中定义

在vue里对数据改变 可以不改变dom 改变实例的数据

点击函数改变   页面也改变this.content = ""