vue2和vue-router基础

Skyme2023/7/11大约 4 分钟

Vue2

创建一个实例

生命周期

create阶段,初始化
mount 挂载阶段
update 更新阶段，当data里面的数据发生改变的时候再刷新视图
destory 销毁阶段


    Document

        {{a}}

    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!'

        },
         beforeUpdate(){

          console.log('有数据更新')},
          updated(){
            console.log('更新完毕')},

        beforeMount(){
            console.log('挂载前')
        },
        mounted(){
            setTimeout(()=>{
                this.a='change!';
            },2000)

        }

    })

模版语法

条件渲染

v-if和v-else


		条件渲染

		这是真的

		这是假的

	var vm=	new Vue({
			el:"#app",
			data:{
				check:true
			}
		})

v-else


		条件渲染

		A
		B
		NOT A/B

	var vm=	new Vue({
			el:"#app",
			data:{
				type:'B'
			}
		})

列表渲染


		列表渲染

		{{item.message}}

	var vm=	new Vue({
			el:"#app",
			data:{
			   items: [
			      { message: 'Foo' },
			      { message: 'Bar' }
			    ]
			}
		})

事件处理

axios


		axios

		code:{{info.code}}
		msg:{{info.msg}}
		token:{{info.data.token}}

		new Vue({
			el:"#app",
			data(){
				return {
					info:{
						code:"",
						msg:"",
						data:{
							token:""
						}
					}
				}
			},
			mounted(){
				axios.get('data.json')
								.then(response =>this.info=response.data)
			}
		})

表单输入绑定


    Document

  mes:{{a}}

    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!',

        },
        methods:{
        hanld(){
            this.seen=!this.seen;
        },

        created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
      } ,
         beforeUpdate(){

          console.log('有数据更新')},
          updated(){
            console.log('更新完毕')},

        beforeMount(){
            console.log('挂载前')
        },
        mounted(){
            setTimeout(()=>{
                this.a='change!';
            },2000)

        }

    }})

组件


    Document

  mes:{{a}}

    Vue.component("my-component",{
        props:["a"],
        template: '{{a}}'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!',
            items:"item?"
        },
        methods:{
        hanld(){
            this.seen=!this.seen;
        },

        created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
      } ,
         beforeUpdate(){

          console.log('有数据更新')},
          updated(){
            console.log('更新完毕')},

        beforeMount(){
            console.log('挂载前')
        },
        mounted(){
            setTimeout(()=>{
                this.a='change!';
            },2000)

        }

    }})

prop

首先就是prop的大小写问题

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '{{ postTitle }}'
})

传递静态或动态参数

子传父:

子组件可以使用$emit,让父组件监听到子组件

vm.$emit( event, arg )

父传子:

父组件可以使用props传参给子组件

计算属性

计算属性使用的原因是因为复用的问题：

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：


  {{ message.split('').reverse().join('') }}

在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量message的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难以处理。

所以，对于任何复杂逻辑，你都应当使用计算属性。

计算属性是基于他们的响应式依赖进行缓存的

插槽内容


    vue插槽

     Vue.component("container",{
        template: ''
    })
    Vue.component("x-head",{
        props:["title"],
        template: '{{title}}'
    })
    Vue.component("c-foot",{
        props:["item"],
        template: '{{item}}'
    })
    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!',
            seen:"skyme"
        }

    //     created: function () {
    // // `this` 指向 vm 实例
    // console.log('a is: ' + this.a)
    //   } ,
    //      beforeUpdate(){

    //       console.log('有数据更新')},
    //       updated(){
    //         console.log('更新完毕')},

    //     beforeMount(){
    //         console.log('挂载前')
    //     },
    //     mounted(){
    //         setTimeout(()=>{
    //             this.a='change!';
    //         },2000)

    //     }

    })

自定义事件


    vue自定义事件

     Vue.component("container",{
        template: ''
    })
    Vue.component("x-head",{
        props:["title"],
        template: '{{title}}'
    })
    Vue.component("c-foot",{
        props:["item","index"],
        template: "{{index}}'----'{{item}}删除",
        methods:{
           removef:function(){
            this.$emit("remove");
           }
        }
    })
    var vm=new Vue({
        el:'#app',
        data:{
            a:'hello!',
            names:["skyem","jack","love"]

        },
        methods:{
            removeE:function(index){
                this.names.splice(index,1);

            }
        }

    })

vue-cli搭建demo

安装vue-cli脚手架

创建项目

使用webpack打包方式创建项目名为demo的vue项目

npm run dev//热部署

vue-router

vue+vue-router创建的单页应用

首先是按照vue-router，然后创建router目录

我们要把某个组件映射到vue-router当中,这样我们才能够通过vue-router(routes)去访问这个组件

动态路由匹配

动态路径参数:

import Vue from 'vue'
import Router from 'vue-router'
import Content from '../components/content'
Vue.use(Router);
const User = {
  template: 'User {{ $route.params.id }}'
}
export default new Router({

  routes:[{
    path:"/content",
    name:"Content",
    component:Content
  },{ path: '/user/:id', component: User }]
})

一个“路径参数”使用冒号:标记。当匹配到一个路由时，参数值会被设置到this.$route.params，可以在每个组件内使用。

编程式导航

一些官方文档的说明:

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

注意：如果提供了path，params会被忽略，上述例子中的query并不属于这种情况。取而代之的是下面例子的做法，你需要提供路由的name或手写完整的带有参数的path：

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

简单理解就是提供了js的方式

注意：在 Vue 实例内部，你可以通过$router访问路由实例。因此你可以调用this.$router.push(刚刚在这里卡了半天拿不到没打$这个符合)