开发

作者: taijielan | 来源:发表于2020-03-21 17:43 被阅读0次

注册组件以及向组件传递值,通过`props['aaaa']`，声明属性，引用组件通过.

<chat :aaaa = "cartlist"></chat>


new Vue({

        el: '#app',
        components: {
            Chat
        },
        data() {
            return {
                cartList: []
            }
        },
      
        }
    })

 var Chat = {
        template: `<div>
     购物车
    <table border="1">
        <tr>
            <th>选中</th>
            <th>数量</th>
            <th>价格</th>
            <th>名称</th>
        </tr>
        <tr v-for ="(item,index) in aaaa">
            <td><input type="checkbox" v-model="item.select"> </td>
            <td><span @click="reducecount(index)"> - </span>{{item.count}}<span @click="addcount(index)"> + </span></td>
                <td>{{item.count * item.price}}</td>
                <td>{{item.text}}</td>
        </tr>


    </table>

</div>`
        , props: ['aaaa'],
        methods: {
            reducecount(val) {
                if (this.cartList[val].count > 1) {
                    this.cartList[val].count--;
                } else {
                    console.log(this.cartList[val].text)
                    if (window.confirm(`是否删除${this.cartList[val].text}?`)) {
                        this.cartList.splice(val, 1)
                    }
                }

            },
            addcount(val) {
                this.cartList[val].count++

            },
        }

    }

过滤掉一些数据

 chooseCount() {
                return this.aaaa.filter(v => v.select).length
            },

监听 computed

定义：
computed: {
            numString() {
                return Number(this.n1) + Number(this.n2) + Number(this.n3)
            }
        }
使用
        template: '<div> 简单的计算：<input type="text" v-model="n1">+<input type="text" v-model="n2">+<input type="text" v-model="n3">={{numString}}' +

深度监听

   watch:{
          aaaa:{
              handler(){
                  window.localStorage.setItem("chat",JSON.stringify(aaaa))
              },
              deep:true
          }  
        },

页面存储数据

   window.localStorage.setItem("chat",JSON.stringify(aaaa))

本地存储 json序列化和反序列化

                 window.localStorage.setItem("chat",JSON.stringify(this.a))
            this.cartList = JSON.parse(window.localStorage.getItem("chat"))

Vue-cli :脚手架
Vue-router：路由
Vuex：状态管理。
http ：axios

项目的配置

image.png

启动项目`cnpm run serve`

阻止表单的提交

e.preventDefault()

重定向

router.js
  {
    path: '/',
    name: 'Regist',
    redirect: "/login",
  },

`async`, `await`异步调用

  async submitHandler(e){
                e.preventDefault()
                try{
                    const result = await  this.$http.get("/api/login",{params:this.model}))
                }catch (e) {
                    console.log(e)
                    
                }

Vuex

调用

                    this.$store.commit('setToken',result.data.token)

state: {
    tokens:''
  },
  mutations: {//同步的方法
    setToken(state,token){//setToken 方法名
      state.tokens = token
    }
  },
  actions: {
  },
  modules: {
  },
  getters:{

  }

本地存储`window.localStorage.setItem("token",result.data.token)`

axios全局请求拦截

设置拦截器

import  axios from 'axios'
import  store from './store'
import  router from './router'

//http 全局拦截
//token 放在header的请求头上 传给后台。

export  default  function setAction() {

    //将token配置到header
    axios.interceptors.request.use(
        config  =>{
            if(store.state.tokens){
                config.headers.token = store.state.tokens
            }
            return config
        }
    )

    //每次的返回都会经过拦截器
    axios.interceptors.response.use(
         response =>{
             if(response.status == 200){
                 const data = response.data
                 if(data.code == -1){
                     //登陆过期了，清空localstorege和store中的记录清除
                     store.commit('token','')
                     window.localStorage.removeItem('token')
                     //跳转到login
                     router.replace({path:'/login'})

                 }
                 return data
             }
             return  response
         }
    )
}

在main.js中执行方法

import setaxios from './setaxios'
setaxios()```


##### 嵌套路由的跳转
* 首先定义接收跳转的父容器

在父容器跳转路由中添加子路由

{
        path: '/bomnav',
        name: 'Bomnav',
        component: () => import(/* webpackChunkName: "about" */ '../views/Bomnav.vue'),
        children: [

            {
                path: 'index',
                name: 'index',
                component: () => import('../views/Index.vue')
            }, {
                path: 'classify',
                name: 'Classsify',
                component: () => import('../views/Classify.vue')
            }, {
                path: 'search',
                name: 'Search',
                component: () => import('../views/Search.vue')
            }, {
                path: 'car',
                name: "Car",
                component: () => import('../views/Car.vue')

            }, {
                path: 'mine',
                name: 'Mine',
                component: () => import('../views/Mine.vue')
            }

        ]
    }

设置通过路由进行跳转到指定页面
this.$router.push({path:'/bomnav/mine'})

给路由添加动画

https://www.cnblogs.com/szyblogs/p/7069577.html

子组件向父组件传递消息

子组件通过this.$emit('方法名')。父组件通过v-on:（方法名）接收

        子组件：template:`<div>{{title}}<button @click = "$emit('remove')">remove</button></div>`,
                 父组件：v-on:remove = "list.splice(index,1)"

父组件向子组件传递消息

子组件创建prop属性，父元素传递值

              子组件：props:['shuxing']
              父组件：v-bind: shuxing = "item.title"

props可以传递类型

props:{title:String}

字符串数组形式列出的 prop

props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

props 可以直接传递，也可以通过`v-bind`动态赋值。

自定义v-model

    Vue.component('custom-input',{
                props:['checked'],
                model:{
                    prop:'checked',
                    event:'change'
                },
                template:
                    `<div>
                    <input type = "checkbox" v-bind:checked = "checked"  v-on:change = "$emit('change',$event.target.checked)">
                    </div>`
                
            })

    <div id="app7">
            <custom-input v-model="changeData"></custom-input>
            <p>{{changeData}}</p>
        </div>

复选框

<div id="app16">
            <input type="checkbox" id ="check" v-model = "checkboxs" value="jack"/>
            <label for = "jack">jack</label>
            
            
            <input type="checkbox" id ="check1" v-model = "checkboxs" value="lily"/>
            <label for = "lily">lily</label>
            
            <input type="checkbox" id ="check2" v-model = "checkboxs" value="sam" />
            <label for = "sam">sam</label>
            
            <p>选中的复选框{{checkboxs}}</p>
            
</div>
new Vue({
                el:"#app16",
                data:{
                    checkboxs:[]
                }
            })

vue插槽

    Vue.component("alert-box",{
                template:`<div class="demo-alert-box">
      <strong>Error!</strong>
      <slot></slot>
    </div>`
            })
            
            new Vue({
                el:'alert-box'
            })
<alert-box>something bad</alert-box>

`font-family`

span{
      font-family: PingFangSC-Medium; //mac电脑优先使用的字体。
}

光标变化`cursor: pointer;`

`Vue.prototype`是个Vue添加属性，而不是添加变量。

vue生命周期created中不能使用this,可以使用

`created(){
this.test()
// created:() =>{
// var that = this
// that.test()

                // console.log("created"+that.foo)
            },`

指令	解释
v-once	不改变界面，但是改变属性值
v-html	可以使用html
v-if	条件控制
v-bind :href = "url"	缩写：href ="url"
v-on:click ="dosomething"	缩写@click = "dosomething"
computed	计算属性，会使用相应式依赖使用缓存
method	会使用相应式依赖使用缓存
watch	监听属性

父组件向子组件传递通过‘props’，子组件向父组件发送指令‘$emit[‘’]’

    
        Vue.component('custome_li',{
            template:`<li>{{title}} <button @click = "$emit('remove')">remove</button></li>`,
            props:['title']
        })
        new Vue({
            el:'#textli',
            data:{
                newText:" ",
                items:[{
                    id:1,
                    title:"11111"
                },{
                    id:2,
                    title:"22222"
                },{
                    id:3,
                    title:"33333"
                }]
            },
            methods:{
                addNewTod(){
                    
                }
            }
        })



<div id="textli">
            <form v-on:submit="addNewTod">
                <label> add new Text</label>
            <input v-model="newText" />
            <button>add</button>
            </form>
            
            <ul>
                <li is = "custome_li" v-for="item,index in items":key = "item.id" @remove = "items.pop(index,1)" :title = "item.title"></li>
            </ul>
            
        </div>

Vue中style的写法

:style="{ fontSize: fontSize + 'em' }"

:title 表示是动态传递数据， title中静态数据，类似:is也是动态数据，is是传递的静态数据。

    <div id = "example2">
        <custom_title title="test2222">
            
            </custom_title>
                
                
                <custom_title  :title = "test">
                    </custom_title>
                </div>


Vue.component('custom_title',{
                props:["title"],
                template:`<div>{{title}}</div>`,
            });
            
            new Vue({
                el:'#example2',
                data:{
                    test:"test1111"
                }
            });

后备插槽：

Vue.component('custom-btn',{
                template:`<button>
                    <slot>提交</slot>
                </button>`
            })

<div id="example10">
                    <custom-btn>
                    </custom-btn>
                    
                </div>
显示的内容是
<button>提交</button>。
如果
<div id="example10">
                    <custom-btn>
                                      注册
                    </custom-btn>
                    
                </div>
显示的内容是
<button>提交</button>。

v-slot:可以被替换为‘#’

slot 插槽作用域对比

2.6.0之前的：写法是 <template slot-scope= "slotprop">

<div id="app9">
            <base-layout-scope>
                <template slot-scope= "slotprop">
                    <div>{{slotprop.msg }}</div>
                </template>
            </base-layout-scope>            
        </div>

Vue.component('base-layout-scope',{
                template:`<div>
                    <slot :msg = "msg">{{person.teacher.name}}</slot>
                </div>`,
                data(){
                    return {
                        msg:'我是谁',
                        person:{
                            teacher:{
                                name:'韩梅梅',
                                age:20,
                                sex:'女'
                            }
                        }
                    }
                }
            })

2.6.0 之后的写法<base-layout-slot #item ="slotprop"或者<base-layout-slot v-slot:item ="slotprop"

    <div id="app10">
            <base-layout-slot #item ="slotprop"><div>{{
                slotprop.person.teacher.name
            }}</div></base-layout-slot>
            
        </div>


    Vue.component('base-layout-slot',{
                template:`<div>
                    <slot :item = "person"> {{person.teacher.name}}</slot>
                </div>`,
                data(){
                    return {
                        msg:'我是谁',
                        person:{
                            teacher:{
                                name:'韩梅梅',
                                age:20,
                                sex:'女'
                            }
                        }
                    }
                }
            })

开发

注册组件以及向组件传递值,通过`props['aaaa']`，声明属性，引用组件通过.

过滤掉一些数据

监听 computed

深度监听

页面存储数据

本地存储 json序列化和反序列化

启动项目`cnpm run serve`

阻止表单的提交

重定向

`async`, `await`异步调用

Vuex

本地存储`window.localStorage.setItem("token",result.data.token)`

axios全局请求拦截

给路由添加动画

子组件向父组件传递消息

父组件向子组件传递消息

props可以传递类型

字符串数组形式列出的 prop

props 可以直接传递，也可以通过`v-bind`动态赋值。

自定义v-model

复选框

vue插槽

`font-family`

光标变化`cursor: pointer;`

`Vue.prototype`是个Vue添加属性，而不是添加变量。

vue生命周期created中不能使用this,可以使用

父组件向子组件传递通过‘props’，子组件向父组件发送指令‘$emit[‘’]’

Vue中style的写法

:title 表示是动态传递数据， title中静态数据，类似:is也是动态数据，is是传递的静态数据。

后备插槽：

v-slot:可以被替换为‘#’

slot 插槽作用域对比

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

开发

注册组件以及向组件传递值,通过props['aaaa']，声明属性，引用组件通过.

过滤掉一些数据

监听 computed

深度监听

页面存储数据

本地存储 json序列化和反序列化

启动项目cnpm run serve

阻止表单的提交

重定向

async, await异步调用

Vuex

本地存储window.localStorage.setItem("token",result.data.token)

axios全局请求拦截

给路由添加动画

子组件向父组件传递消息

父组件向子组件传递消息

props可以传递类型

字符串数组形式列出的 prop

props 可以直接传递，也可以通过v-bind动态赋值。

自定义v-model

复选框

vue插槽

font-family

光标变化cursor: pointer;

Vue.prototype是个Vue添加属性，而不是添加变量。

vue生命周期created中不能使用this,可以使用

父组件向子组件传递 通过‘props’，子组件向父组件发送指令‘$emit[‘’]’

Vue中style的写法

:title 表示是动态传递数据， title中静态数据，类似:is也是动态数据，is是传递的静态数据。

后备插槽：

v-slot:可以被替换为‘#’

slot 插槽作用域 对比

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

注册组件以及向组件传递值,通过`props['aaaa']`，声明属性，引用组件通过.

启动项目`cnpm run serve`

`async`, `await`异步调用

本地存储`window.localStorage.setItem("token",result.data.token)`

props 可以直接传递，也可以通过`v-bind`动态赋值。

`font-family`

光标变化`cursor: pointer;`

`Vue.prototype`是个Vue添加属性，而不是添加变量。

父组件向子组件传递通过‘props’，子组件向父组件发送指令‘$emit[‘’]’

slot 插槽作用域对比