模版语法

文本(输出变量)

<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