v-bind:属性名="表达式",最终表达式运算结束的结果赋值给该属性名
-简化的写法:`属性名=表达式`如v-blind:class=xxx，class:根据可变的表达式的结果来给class赋值。
class的结果分类
-一个样式:返回字符串(三元表达式和key和样式的清单对象)
-多个样式:返回对象(样式key,true或false的值)
class取回一个,返回一个字符串； 取多个,返回一个对象。
此处代码规范:
当参数是一个的时候,小括号可以省略
当代码只有一行且是返回值的时候,可以省略大括号
在script中能使用的对象,基本在template中也能使用,但是在script中加this,template中不需要加this
v-on:事件名="表达式||函数名"
-简写:@事件名=表达式||函数名
函数名如果没有参数,可以省略() 只给一个函数名称，生命组件内函数,在export default这个对象的根属性加上methods属性,其是一个对象，-key是函数名,value是函数体，在export default这个对象的根属性加上data属性,其是一个函数,返回一个对象。
-对象的属性使我们初始化变量的名称，凡是在template中使用变量或者函数,不需要加this，在script中使用需要加上this
v-for
可以使用操作数组(item,index)
可以使用操作对象(value key index)
key是类似trank by 的一个属性
为的就是告诉Vue,js中的元素,与页面之间的关联,当试图删除元素的时候,是单个元素的删除而不是整版替换,所以需要关联其关系,设置(必须,性能)
父子组件：
父和子,使用的是父,被用的是子
父需要声明子组件,引入子组件对象,声明方式如下:
import 子组件对象 from './xxx.vue';
{
components:{
组件名:子组件对象
}
}
全局组件,使用更为方便,不需要声明.直接用
在main.js中引入一次,在main.js中使用,`vue.component('组件名',组件对象);`
声明全局组件
Vue.component('headerVue',headerVue)
注册一个组件,第一个参数是名称,在template中使用,第二个参数是实际的对象,显示成什么内容
父子组件之间的通信：
父组件通过子组件的属性将值进行传递
-方式有2:
+常量:prop1="常量值"
+变量:prop1="变量名"
子组件需要声明
根属性props:['prop1','prop2']
在页面中使用{{prop1}}
在js中应该如何使用prop1?
this.prop1获取
props接受父组件传递的参数值
子向父组件通信(vuebus)(扩展)
通过new Vue()这样的一个对象,来$on('事件名',fn(prop1,prop2))
另一个组件引入同一个vuebus,来$emit('事件名',prop1,prop2)
vue的核心插件:
-vue-router 路由，前端路由 核心就是锚点值的改变,根据不同的值,渲染指定DOM位置的不同数据
ui-route:锚点值改变,如何获取模板?ajax Vue中.模版数据不是通过ajax请求来获取,而是调用函数获取到模板内容
-vuex 管理全局共享数据
使用方式
- 下载;npm i vue-router -S
- 在main.js中引入 import VueRouter from 'vue-router';
- 安装插件 vue.use(VueRouter)//挂载属性
- 创建路由对象并配置路由规则 +let router =new VueRouter({routes:[{path:'/home',component:Home}]});
- 将其路由对象传递给Vue实例,option中 +options中加入router:router
- 在app.vue中留坑<router-View></ router-View>