模版语法
文本(输出变量)
<span>Message:{{msg}}
原始HTML(输出html标签)
<span v-html="rawHtml"></span>
特性(添加变量id名)
<div :id="dynamicId"></div>
表达式(必须是一句话，且必须有返回值)
{{number+1}}
{{ok?'yse':'no'}}
{{message.split('').reverse().join('')}}
指令
<p v-if="seen">现咋子你看到我了</p>
修饰符(prevent阻止默认行为，如跳转)
<form v-on:submit.prevent="onSubmit">...</form>
缩写
<a v-bind:href="url">...</a>
<a :href="url">...</a>
-------------------------------------
<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>
自定义指令
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.需要使用的地方在<script>引进
import ./components/n
<div v-n="3"></div>
计算属性
基础示例
<div>
我借你{{money}},你还我{{a}},还剩{{b}}
</div>
data(){
return {
money:1000,
a:10
}
},
computed:{
b:function(){
return this.moey-this.a
}
}
如果money或者a发生变化，b的这个计算属性会自动更新
应用场景-具有依赖关系的数据监听
类与样式
对象语法
适合较多的class名或者动态的class
数组语法
适合较少的class名
<div :class="[a1,a2]"></div> //渲染出来就是同时有2个类名
<div :class="{'test-1':a3}"></div> //如果为false就隐藏
<div :class="obj"></div> //这种可以动态的修改
data(){
return{
a1:'test-1',
a2:'test-2',
a3:false,
obj:{
'test-1':false
}
}
}
条件&列表渲染
基础用法
if else、for的模版处理方式
<ul>
<li v-for="item in list" :key="item">
<li v-for="(item,idx) in list" :key="item"> //加了索引
{{item}}
</li>
//item是自己随便定义的,对应数组里面的值
</ul>
data(){
return {
list:['a','b','c','d']
}
}
分组用法
复杂模版的分组条件处理的方式 (比如给a,b,c后面加个分割线)
<ul>
<template v-for="item in list">
<li :key="item+1">hello</li>
<li :key="item">{{item}}</li>
</template>
</ul>
//在每一条循环的语句中，加上一hello
//每次循环遍历都要执行这一块，这就叫分组
data(){
return {
list:['a','b','c','d']
}
}
事件处理
定义&缩写
事件的定义及缩写
内联写法
事件传参和事件对象
<button v-on:click="msg">test</button> //函数名称一定要在methods方法中定义
methods:{
msg:function(){
console.log(123)
}
}
-----------------------------------------
<button @click="counter+1">test</button>
data:(){
return{
counter:0
}
}
-----------------------------------------
<button @click="msg('s',$event)">test</button>
methods:{
msg:function(a,b){
console.log(a)
console.log(b) //打印到当前的事件对象
}
}
事件修饰符
快速结合键盘事件提升效率
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
还有按键修饰符，系统修饰符，鼠标按钮修饰符
深入了解组件
props
组建的参数传递(父组件向子组件传递，子组件接收就是靠props)
父组件App.vue
<template>
<com :age="age" />//这是动态的
<com age="19" />//这是静态的
</template>
<script>
import com from './components/com.vue'
export default{
components:{
com
},
data(){
return {
age:'18'
}
}
}
</script>
子组件com.vue通过
props:['age'] //接收
模版就可以输出{{age}}
slot
插槽在组件抽象设计中的应用(定义好了，插槽，留一个位置 )
//App.vue文件
<com :age="ages" @patch="msg">
<h1 slot="a">我要加东西2</h1>
</com>
//com.vue
<template>
....
<slot name="a"></slot>
</template>
就是动态往子组件里面塞了东西,子组件本身没这个东西，是父组件这边添加的，就可以动态显示和隐藏东西的作用,可以让组件更加灵活，把组件无限的抽象
自定义事件
父子组建的通信方式(子组件向父组件传递，就要靠自定义事件触发)
//子组件com.vue
<button @click="$emit('patch')">发送到父组件</button>
//父组件App.vue
<com @patch="msg" />
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:"/'配置一下
<div id="app">
<router-view></router-view> //其实就是路由切换就替换这里的组件
</div>
如果是默认安装好，安装路由会出错，需要配置一下
router-link传参数
<router-link :to="{name:'user',params:{userId:123}}">User</router-link>
Vuex基础
image.png
流程图解析
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')
传参数的写法
image.png
image.png
