Vue知识

Vue入门基础知识

1、Vue使用的基本操作

i. 先下载，引入vue.js

ii. Vue，实例化一个vue实例化对象（new Vue({})）

1. 新建一个vue实例化对象（Vue是一个构造函数）

2. 执行vue构造函数中每一句代码

3. 将新创建的vue实例化对象赋值给vue构造函数中的this

iii. 往vue实例化对象中传入一个对象（Vue实例化传入的对象里面的值也都为对象，以键值形式对存在，如data对象）

2、Vue的基础知识（应用：普通版的todolist（待办事项））

1) el: 节点挂载 限定Vue语法的作用范围

2) Data(需要渲染的数据，Vue 实例的数据对象)

a) data的类型可以为：Object | Function。

注：组件的定义只接受 function（因为函数有自己的作用域，每一个实例的data属性都是独立的）

b) data可以为：

1. 自定义数据

2. 通过ajax获取的后台数据

3. Data是一个函数

3）Vue语法，实现对(DOM)节点的渲染、删除、添加

a) 模板渲染{{ obj }}（data中的数据可以直接在html中显示,让js变量直接在html中使用）

b) v-for (列表渲染，使用for循环遍历数据生成节点，遍历对象和数组)，数据驱动视图

使用：1. 用 v-for 把一个数组对应为一组元素

v-for=”(item,index) in list”

list为源数据数组并且item是数组元素迭代的别名

index为当前项的索引

2、一个对象的 v-for

v-for="（value,key） in object"

object为data中定义的一个对象，value为对象的值，key为对象的键名

c) 条件渲染v-if、v-show（使用数据隐藏和显示节点）

1.v-if删除了节点

2.v-show隐藏了节点(使用display:none隐藏了节点)

d )删除节点，使用@click时间并在methods中定义delitem删除函数，并用v-bind绑定自定义属性，

如：:data-id="item.id" 事件处理@click与回调函数methods （与v-bind结合使用，因为在进行操作的时候需要传入值）

1. 在节点上直接绑定click事件

2. 在methods属性中定义函数

3. methods中使用data中的数据必须使用this访问

4. this代表vue实例化对象

e) 添加节点,通过input的value值与data绑定

v-model与表单元素的value值的双向数据绑定（在表单控件或者组件上创建双向绑定,在节点上直接修改value属性） 双向数据绑定

1. 将表单中input的值value和data中值绑定起来 （data设置该数据的属性值title:"默认值"，input中绑定v-model="title"，添加按钮绑定@click="additem"）

2. data改变input[value]改变

data中的title的值改变，input中的value也会发生改变

3. Input[value]改变data改变 在input中输入值，点击添加按钮，data中的数据发生改变

f) 绑定属性（自定义属性）（绑定属性值）V-bind:href，data-id

1. 简写(：href)

2. v-bind：的缩写 : （冒号）

g) v-if删除了节点,页面审查不到

v-show隐藏了节点(使用display:none隐藏了节点),页面能够审查到

h) template：定义组件模板，模板中的内容即为组件的内容

1. 在template标签中写html模板,并标注id

2. 在组件中使用template属性通过id引用template标签

3. 模板将会替换挂载的元素。挂载元素的内容都将被忽略

4. template中的html不会被浏览器首次加载时所渲染，在调用了组件之后才渲染的。

也就是说:template: '<App/>' 表示用<app></app>替换index.html里面的<div id="app"></div> i) 应用：普通版的todolist