模版语法
文本(输出变量)
Message:{{msg}}
原始HTML(输出html标签)
特性(添加变量id名)
表达式(必须是一句话,且必须有返回值)
{{number+1}}
{{ok?'yse':'no'}}
{{message.split('').reverse().join('')}}
指令
现咋子你看到我了
修饰符(prevent阻止默认行为,如跳转)
缩写
...
...
-------------------------------------
...
...
自定义指令
1.新建n.js
import Vue from 'vue'
Vue.directive('n',{
bind:function(el,binding){
el.textContent = Math.pow(binding.value,2)
},
update:function(el,binding){
el.textContent = Math.pow(binding.value,2)
}
})
2.需要使用的地方在 子组件com.vue通过 props:['age'] //接收 模版就可以输出{{age}}
slot
插槽在组件抽象设计中的应用(定义好了,插槽,留一个位置 )
//App.vue文件
我要加东西2
//com.vue
....
就是动态往子组件里面塞了东西,子组件本身没这个东西,是父组件这边添加的,就可以动态显示和隐藏东西的作用,可以让组件更加灵活,把组件无限的抽象
自定义事件
父子组建的通信方式(子组件向父组件传递,就要靠自定义事件触发)
//子组件com.vue
//父组件App.vue
import com from './components/com.vue'
methods:{
msg:function(){
console.log('msg')
}
}
如果跨组件通信,就要用到vuex
路由基础
vue-router基础
必备三步
安装vue-router
新建router.js和main.js平级
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import pageA from './pages/a.vue'
import pageB from './pages/b.vue'
const routes = [
{
path:'/pagea',
component:pageA
},
{
path:'/pageb',
component:pageB
},
]
const router = new VueRouter({
routes //经过VueRouter实例化
})
//把这个对象导出
export default router
-------------------------------------
还要在main.js中关联起来
import router from './router'
new Vue({
router
}).$mount('#app')
创建vue.config.js
在脚手架官网搜索runtime
module.exports = {
runtimeCompiler:true
}
还要在App.vue文件中插入这个节点才可以显示,默认页面是/,需要在path:"/'配置一下
//其实就是路由切换就替换这里的组件
如果是默认安装好,安装路由会出错,需要配置一下
router-link传参数
User
Vuex基础
流程图解析
1.vue模版可以Render一个数据
2.vue模版可以接受用户的交互行为,来触发这个Dispatch
3.Actions去做提交Commit找到这个对应的这个数据交互内容,对这个数据进行改版
4.最后使State数据改变
5.Vue.Components数据进行更新
State是数据的来源
Mutations是提供操作数据(如何改变)
Actions什么时候去做这个改变数据行为
如果使用
1.安装npm i vuex
2.新建store.js和main.js同级
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count:1
}
const mutations = {
increment(state){
state.count++
},
decrement(state){
state.count--
}
}
const actions = {
increment:({commit}=>{
commit('increment')
}),
decrement:({commit}=>{
commit('decrement')
})
}
export default new Vuex.Store({
state,
mutations,
actions
})
---------------------------------
然后main.js需要
import store from './store'
new Vue({
store
}).$mount('#app')
传参数的写法