vue小结

Posted 2022-11-29 zhixuChen333

VUE

主要特点

1.MVVM模式，实现数据与视图的双向绑定
2.虚拟DOM，提高效率

基本指令

1. data 插值表达式，直接取到Vue实例中data的数据
2. v-text
3. v-html 会把文本解析成html进行展示
4. v-on 绑定事件，简写为@
5. v-if 底层通过操作dom树上的元素节点实现页面的展示和隐藏
6. v-show 底层通过css中的display属性
7. v-bind 将html标签中的某个属性与vue实例进行绑定，简写成 ：
8. v-for 遍历对象、数组
9. v-model 将html标签的value属性与vue实例进行绑定，主要用在表单元素上，体现双向绑定机制

其他

computed

类似于后端的缓存，只要有计算出一次结果，再去调用，不会再次计算，而是直接取结果渲染

事件修饰符

1. .stop 用来阻止事件冒泡
2. .prevent 用来阻止标签的默认行为
3. .self 只监听自身标签触发的事件
4. .once 该事件只触发一次

键盘修饰符

Axios

vue的生命周期

初始化阶段

1. beforeCreate()
2. create()
3. beforeMounted()
4. mounted

运行阶段

1. beforeUpdate
2. updated

销毁阶段

1. beforeDestory
2. destoryed

ES6新特性

声明变量

1. let 用来声明局部变量
2. const 声明常量，一旦被赋值不能被修改，推荐用来定义对象、数组

箭头函数

在使用匿名函数作为参数时使用，类似于JAVA中的lambda表达式 区别：箭头函数没有this，匿名函数有

模板字符串

语法：``

对象的定义

在定义对象时如果对象属性名和变量名一致时，写一个即可

组件

全局组件

 //第一个参数组件名，第二个参数组件的配置对象，第三个组件的html
   Vue.component('todo-title', 
            props: ['titles'],
            template: '<p>titles<p/>'
        );

局部组件

 var vm = new Vue(
            el: "#app",
            data: 
                message: "hello,vue!"
            ,
            components: 
                add: 
                    template: `<h2>添加</h2>`
                
            
        )

数据传递 props

实现父组件到子组件之间的数据传递，单向数据传递

1.传递静态数据

  <div id="app">
        <login title="我是静态数据" count="0"></login>

    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        const login = 
            template: `<h2>title==count</h2>`,
            data() 
                return 

                
            ,
            props: ['title', 'count']
        
        const app = new Vue(
            el: "#app",
            data: 

            ,
            components: 
                login
            

        )
    </script>

2.传递动态数据

 <div id="app">
        <login :title="vueTitle" :count="vueCount"></login>

    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        const login = 
            template: `<h2>title==count</h2>`,
            data() 
                return 

                
            ,
            props: ['title', 'count']
        
        const app = new Vue(
            el: "#app",
            data: 
                vueTitle: '我是动态属性',
                vueCount: 5
            ,
            components: 
                login
            

        )
    </script>

子组件向父组件传递数据

语法： @传递事件名=“父组件中传递事件名”

 <div id="app">
        <login :title="vueTitle" :count="vueCount" @test="testFather"></login>

    </div>
    <script src="../js/vue.min.js"></script>
    <script>
        const login = 
            template: `<h2>title==count<button @click="testSon()">点我</button></h2>`,
            data() 
                return 
                    num: 5
                
            ,
            props: ['title', 'count'],
            methods: 
                testSon() 
                    alert('这是父组件的事件');
                    this.$emit('test', this.num)
                
            
        
        const app = new Vue(
            el: "#app",
            data: 
                vueTitle: '我是动态属性',
                vueCount: 5
            ,
            components: 
                login
            ,
            methods: 
                testFather(count) 
                    alert("这是父组件的方法" + count)
                
            

        )
    </script>

插槽 slot

路由

1. queryString? 问号传参数 this.$route.query.key
2. 路径传参数获取方式 this.$route.params.key

嵌套路由

嵌套路由的路径不能以 / 开头

Vue Cli 脚手架

先安装nodejs

1. vue init webpack +项目名 初始化新项目