vue学习(自用)

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/JiaJiaGan/article/details/77340785

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中的数据

详细信息

展开阅读全文

没有更多推荐了,返回首页