vue学习（自用）

傷城~ 2022-06-10 11:29 307阅读 0赞

## vue基本指令 ##

### v-text 显示文本 ###

### v-html 显示网页 ###

### v-bind 数据绑定 让我们页面上显示的值动态化(单向数据流的体现) 单 向数据流:当模型发生更改之后，我们的视图跟着变化 ,v-bind:title=”“可以简写 :title=”“ ###

### v-on 事件处理 v-on:click=”” 可以简写成@click 有参数时可以写成@click(params) ###

### v-modle 数据双向绑定 （一般用于表单元素） 原理 （属性劫持） ###

### v-f 如果为假，不会创建dom元素 ###

### v-show 如果为假，会创建dom元素，通过样式隐藏了 ###

*  需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。

### v-for 语法： v-for=”(person,index) in persons” :key=”“ ###

*  有key属性时并且值不同，每个元素都是新创建的，没有key则会复制上一个元素

## 过滤器语法 ##

### 私有过滤器 只有在当前Vue实例中使用 ###

filters:{
            toUC:function(input){ 
                return input.toUpperCase()
            }
        }

### 全局过滤器 在所有的Vue实例中都可以使用 ###

*  filters里面的函数必须要有返回值

Vue.filter('toUC',function(input){ 
            return input.toUpperCase();
        })

## Vue的五种创建组件方式 ##

### 1. 先定义，再注册 ###

<body>
        <div id="app"> <login></login> </div> </body> <script> // 定义组件 var loginComponent = Vue.extend({ template : '<div>用户名:<input type="text"> </br>密码: <input type = "password"> </br> <button>注册</button></div>' }) // 注册组件 Vue.component('login',loginComponent); var vm = new Vue({ el : '#app' }) </script>

### 2. 定义并注册 ###

<body>
        <div id="app"> <login></login> </div> </body> <script> // 定义组件并注册 Vue.component('login',{ template : '<div>用户名:<input type="text" v-model="username"> \ </br>密码: <input type = "password"> </br> \ <button v-on:click="login">注册</button></div>', methods : { login : function(){ console.log(111); } }, data : function(){ return { username : '张三' } } }); var vm = new Vue({ el : '#app' }) </script>

### 3.把定义我们组件内容代码抽离到 标签中去 ###

<body>
    
        <template id="templateId"> <div>用户名:<input type="text" v-model="username"> </br>密码: <input type = "password"> </br> <button v-on:click="login">注册</button></div> </template> <div id="app"> <login></login> </div> </body> <script> // 定义组件并注册 Vue.component('login',{ template : '#templateId', methods : { login : function(){ console.log(111); } }, data : function(){ return { username : '张三' } } }); var vm = new Vue({ el : '#app' }) </script>

### 4.把定义我们组件内容代码抽离到 中去 ###

<body>
    
        <script type="text/html" id="templateId"> <div>用户名:<input type="text" v-model="username"> </br>密码: <input type = "password"> </br> <button v-on:click="login">注册</button></div> </script> <div id="app"> <login></login> </div> </body> <script> // 定义组件并注册 Vue.component('login',{ template : '#templateId', methods : { login : function(){ console.log(111); } }, data : function(){ return { username : '张三' } } }); var vm = new Vue({ el : '#app' }) </script>

### 5.单文件组件 ###

## vue-router vue路由的三种使用方式 ##

### 申明式导航 ###

<body id="app">
        <router-link to="/home">主页</router-link> <router-view> </router-view> //展示部分 </body> <script> const router = new VueRouter({ routes : [ { path : '/home' , component : home }, ] }) new Vue({ el: '#app', router :router, render: h => h(App) }) </script>

### 编程式导航1 ###

// 编程式导航
        this.$router.push({ name: 'pictureAndText', params: { infoId: this.$route.params.infoId }})
    
        // 定义匹配路由 
         {path : '/goods/pictureAndText',name : "pictureAndText",component:pictureAndText},

### 编程式导航2 ###

// 编程式导航
         this.$router.push({ path: '/goods/goodscommont', query: { infoId: this.$route.params.infoId }})
    
        // 定义匹配路由 
        {path : '/goods/goodscommont',component:goodscommont}

## 获取dom对象 ##

<div ref="textAreaRef"></div> this.$refs.textAreaRef.value = "";

## 父组件给子组件传递数据 ##

// 父组件中
        <subSwipe :lunbo_time="timer"></subSwipe> // 子组件中不限制类型 props ["lunbo_time"] // 子组件中限制类型 export default { props: { // 只检测类型 lunbo_url: String, // 检测类型 + 其他验证 lunbo_time: { type: Number, // default: 0, required: true, validator: function (value) { return value >= 1000 } } } }

## 子组件给父组件传递数据 ##

// 父组件html中
    
        <subnumber v-on:numChange="receiveSubNumberCount"> </subnumber> methods:{ receiveSubNumberCount(num){ console.log(num) } } // 子组件中 this.$emit('numChange', 1);

## 非父子组件传递数据 ##

// 非父子间传递数据要共用同一个vue实例对象
    
      // 传递方
      bus.$emit('sendNumber',1);
    
      // 接收方
      bus.$on('sendNumber',(count)=>{
        console.log(count);
     });

## 生命周期钩子 ##

*  beforeCreate (组件创建钱)
 *  created 创建 （组件创建完但还没有呈现）
 *  beforeMount （挂载前）
 *  mounted 挂载 （组件已经呈现了）
 *  beforeUpdate (更新前)
 *  updated 更新 （组件数据更新时，会调用该方法刷新视图）
 *  beforeDestory (销毁前)
 *  destroyed 销毁 (离开页面时，会销毁掉组件,根主件是承载体，不会被销毁)

## 在根实例对象中的data里创建的Vue实例可以被每个子组件访问到 ##

// 根组件
    new Vue({
    
        el : "#app",
        data:{
    
            bus : new Vue();
        }
    })
    
    // 子组件里访问
    this.$root.bus

## Vuex ##

### Vuex的用途 ： ###

*  主要用来操作项目中全局共享的数据，它可以在多个组件之间进行数据的传递(间接的)，
 *  但是和中央事件总线的区别是，Vuex不是直接把数据传给另外一个组件，
 *  而是把更改之后的数据，放入到公共的仓库中，另外一个组件需要使用的时候去仓库中取

### Vue核心 ###

*  state:管理数据的地方，相当于自定义组件中局部数据 data()\{return \{\}\}
 *  getters: 从state中获取值
 *  Mutations : 同步更改state中的数据
 *  Actions: 异步更改state中的数据

[详细信息][Link 1]

[Link 1]: https://vuex.vuejs.org/zh-cn/actions.html