【基础】-----Vue.js的了解

1.官网：cn.vuejs.org
Stript标签引入要在head里面

2.挂载点，模板，实例之间关系
<div id="root"> </div> -- >挂载点,挂载点之内的内容，是模板
<script>
   new Vue({
   el:"#root",
   template:'<h1>hello</h1>', 模板可以放在实例里
   data:{
msg:"world"

}
})
</script>

3.Vue实例中的数据，事件和方法
<h1>{{number}}<h1/> 插值表达式
<h1 v-text="contect"><h1/>
<div v-html="contect"> </div>二者差别在于，v-text能转义，将标签以字符串方式展现

绑定事件： <div v-on：click=“handleClick”> </div>
handleClick定义在Vue实例的methods里

【基础】-----Vue.js的了解
事件绑定简写：v-on: 可替换成 @

4.Vue中的属性绑定和双向数据绑定
<div v-bind:title="title"></div> title变量指的是实例里的data中title的值
v-bind: 可简写为：
双向绑定：<input v-model="contect"/> input 内容改变，实例中的contect内容也跟着改变

5.Vue中的计算属性和侦听器

【基础】-----Vue.js的了解

compute:一个属性由其他属性计算而来。其他属性没改变，该属性用的是缓存值

侦听器：
<div>{{count}}</div>
data：{
count:0
}
watch:{
firstName:function(){
this.count++ 只要firstName的值发生变化，count+1
}
}

6.v-if,v-show,v-for指令
v-if 当他对应的数据项的值是false时，会直接将该标签清除，
v-show 当他对应的数据项的值为false时，将该标签增加display:none 属性
隐藏显示频繁时用v-show性能更好

v-for：
<ul>
<li v-for="item of list" :key="item">{{item}}</li> 使用key提升渲染效率，但要求key值都不同，若item值相同，

可以用index做key值 v-for="（item ，index）of list"
</ul>
data{list:[1,2,3]}

7.组件的拆分及全局组件，局部组件

【基础】-----Vue.js的了解
全局组件↑

【基础】-----Vue.js的了解
局部组件↑

组件的拆分↑
props属性：意为该组件接收从外部传过来的名为content的属性

8.组件与实例的关系

每一个vue的组件就是一个vue实例，每一个组件也可以写method等属性

【基础】-----Vue.js的了解

当小组件被点击时，触发了handelClick方法，该方法向外触发一个事件，事件名为delete，事件对应的值为index；由于父组件在创建子组件时，有一个监听事件，当监听到delete方法被触发时，就会执行handelDelete方法，该方法定义在父组件的模板里，为父组件的方法

【基础】-----Vue.js的了解
将list中对应的index下标的值删掉。一旦list发生变化，todo-item会将对应的该组件从列表删掉

总结一下大概的逻辑过程：
（1）：父组件通过prop向子组件传值子组件获得父组件传来的内容和索引。
（2）：子组件通过$emit向父组件抛出触发事件名称（delete）和触发事件的list索引值。
（3）：父组件通过监听对应事件名称（@delete）触发函数handleDelete。函数通过子组件抛出的索引值对应删除list

vue-cli相关用法：
1.template中只能有有个标签包裹其他所有标签
2.data 不再是一个对象而是一个函数，返回值为对应数据

【基础】-----Vue.js的了解

相关推荐