本节主要介绍Vue.js开发中的常用指令介绍，后续会持续补充
1. vue中常用的v-指令
v-text // 是元素的innerText，只能在双标签中使用
v-html // 是元素的innerHtml,不支持{{xxx}}
v-if // 元素是否移除或者插入
v-show // 元素是否显示或隐藏
v-model // 双向数据绑定,v-bind是单向数据绑定(内存Js改变影响页面)
v-html不支持{{xxx}}的原因
html:`
<ul>
<li>哈哈</li>
<li>呵呵</li>
</ul>
`,
// html里面出现{{xxx}}是会直接以字符串的形式展示出来的
鉴于很多读者包括本人很容易弄混v-model和v-bind的区别，因此详细介绍一下
<input :value="name" v-model="body">
v-bind 产生的效果只是单向绑定，所以 :value 的效果就是让 input的value属性值等于 data.name 的值，而 v-model 的效果是使input和 data.body 建立双向绑定，因此首先 data.body 的值会给input的value属性，其次，当input中输入的值发生变化的时候，data.body 还会跟着改变。而对于v-bind来说,data.name的值会给input的value属性,但是当input中输入的值发生变化，却不会影响input的value属性
其它非常用的请参考Vue.js官网上的API
2.v-bind的使用
2-1. class 结合 v-bind
- 需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:class="***"
- v-bind:XXX可以缩写成为:XXX(eg: v-bind:class缩写为:class)
- v-bind:class="表达式",最终表达式运算结果将会将结果赋值给该属性名
- class结果的分类
- 一个样式:返回字符串
- 多个样式:返回对象
3. methods 和 on
- v-on:click可以缩写为@click
- 绑定事件的方式
v-on:事件名="表达式||函数名"
- 函数名如果没有参数,可以省略(),只给一个函数名称[只限于@click="函数名",而不是js里面的函数的括号]
- 在export default这个对象的根属性加上methods属性，methods其实是一个对象
- key是函数名，值是函数体
- 在export default这个对象的根属性加上data属性，data属性也是一个对象，返回一个对象
- 对象的属性是我们初始化的变量的名称
- 凡是在template中使用变量或函数,不需要加this
- 在script中使用就需要加this
4. v-for的使用
- 可以单独使用操作数组(item,index)
- 可以使用操作对象(value,key,index)
- vue中必须设置key
5. 父子组件的使用
- 父和子，使用的是父，被用的是子
- 父需要声明使用子组件,引入子组件对象,声明方式如下
import 子组件对象 from './xxx.vue'
{
components:{
组件名:子组件对象
}
}
6. 全局组件(相比于上一种,更常用)
- 不需要声明
- 'vue.component('组件名',组件对象)'
- 所有的组件就可以直接通过组件名使用
//引入子组件
import headerVue from './components/header.vue';
声明全局组件
Vue.component('headerVue',headerVue);
7. 父传子
- 父组件通过子组件的属性值将值进行传递
- 方式有2: 常量
- 变量
- 子组件需要声明
- 根属性props:['prop1','prop2']
- 在页面中直接使用{{prop1}}
- 在js中如何使用prop1? this.prop1获取
8. 子传父
- 通过new Vue()这样的一个对象，来$on('事件名',fn(prop1,prop2))
- 另一个组件通过引入同一个Vuebus,来$emit('事件名',prop1,prop2)
9. 其他事项
在官网: https://cn.vuejs.org/v2/api/上可以查看Vue.js中相关的指令,下面将介绍这些指令的使用方法,相关的API请参考官网上的API
全局配置/API.PNG
全局配置/API
使用方法：通过Vue.调用,
eg: Vue.extend
选项类.PNG
选项类(选项具体可以区分为数据、Dom、生命周期、资源、组合等等)
使用方法:
1.全局的使用[Vue.XXX]
2.实例的使用[this.XXX或new Vue().XXX]
3.选项[new Vue(){}]的参数
或者[export default{}]里边的属性
eg:
//1.全局的使用[Vue.XXX]
import headerVue from './components/header.vue';
Vue.component('headerVue',headerVue);
headerVue.XXX
//2.实例的使用
//在此不举例子，感觉比较简单
//3. 选项中的参数 或者[export default{}]里边的属性
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
实例方法/事件.PNG
实例方法/事件
使用方法:组件内的this和new Vue()
vm.$on // 监听
vm.$emit // 发送
vm.$once
vm.$off
具体用法请参考API
阻止修改现有的属性
var obj = {
foo: 'bar'
}
Object.freeze(obj) //阻止修改现有属性,如果data发生变化,vue.js不予响应
new Vue({
el: '#app',
data: obj
})
附录:
1. 请注意无论是V-bind:value="XXX"还是V-model="XXX"都需要在New Vue(){}中的Data声明,哪怕是个空值
eg
new Vue(){
data:{
mTest:'' //尽管为空值,但是是必须声明的
}
}
2.export、import以及new Vue()之间不能不说的故事
export 用来导出模块，Vue 的单文件组件通常需要导出一个对象，这个对象是 Vue 实例的选项对象，以便于在其它地方可以使用 import 引入
new Vue() 相当于一个构造函数，在入口文件 main.js 构造根组件的同时，如果根组件还包含其它子组件，那么 Vue 会通过引入的选项对象构造其对应的 Vue 实例，最终形成一棵组件树。
export 和export default 的区别在于：export 可以导出多个命名模块.
网友评论