Vue初体验1前言vue基础语法熟悉vue-cli3脚手架使用单一.vue文件迅速开发ES6模块化机制了解vue组件化机

前言

本文仅个人学习总结

vue基础语法
熟悉vue-cli3脚手架
使用单一.vue文件迅速开发
ES6模块化机制
了解vue组件化机制
学习使用vue内部组件通讯 7.本地mock数据

vue起步

1.cdn方式

在.html文件中引入cdn的资源

   <div>{{message}}</div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script>
     new Vue({
         el: "#app
         data: {
             message: 'hello'
         }
     })
   </script>

2.安装vue-cli3

 npm install -g @vue/cli
 npm install -g @vue/cli-server-global
 vue create my=project
 npm run serve

注意: npm start 是默认指令，可以不需要再packer.json文件中配置，但是其他的指令均需要配置

基础语法

v-if 条件判断语句
```
 <div v-if="can">{{message}}</div>
 new Vue({
     el: '#app-3',
    data: {
      can: true
    }
 })
```
修改can的值可以显示隐藏div

ps：经常会说到v-if和v-show的区别,总结的说
- v-if如果为false，初次渲染并不会渲染在dom中，而v-show则是会直接渲染，在显示隐藏的时候实际是修改css的display，几乎没有性能损耗，而v-if则是删除或者增加dom元素，两者在不同的场景下有不同的应用
- v-if使用跟随v-else，用于条件判断，v-show则没有
- 在某些场景下，子组件的生命周期需要不断地重新执行，则可以使用v-if，而v-show控制的子组件生命周期则不会被重新执行

用户输入处理

v-on/@对事件监听

    <button v-on="click"></button>
    或者
    <button @click="click"></button>

v-model对表单应用状态之间数据双向绑定

<div>
    <input v-model="inputValue">
    {{inputValue}}
</div>
 
 new Vue({
     el: "#app",
     data: {
         inputValue: 'aaa'
     }
 })

v-model原理解释：v-model本质上是一种语法糖，他负责监听用户的输入事件以及数据的更新,简单的说，value值改变，出发input事件

等同于

 <input v-bind:value="inputValue" v-on:input="parentValue = arguments[0]">>

组件化

vue中的一个.vue文件就是一个组件，页面通过一个个组件组成

组件按需引入

   <test-comp></test-comp>

   import testComp from './components/testComp' 
   export default {
       components:{ testComp }

父组件通过props传值给子组件
子组件通过$emit派发事件，父组件通过监听该事件触发事件

<father>
   <div @:test="count+1">{{count}}</div>
</father>
<child>
   <button @clik="$emit('test')"></button>
</child>

mock数据

使用webpack中的configureWebpack

module.exports = {  
    configureWebpack: {
        devServer: {
            before(app) {
                app.get('/api/url', function() {
                    res.json({
                        
                    })
                })
            }
        }  
    }
}

install fetchMock等
对接yapi

数据持久化(vue + localStorage)

created() {
    this.data = JSON.parse(window.localStorage.getItem('data'))
},
methods: {
    setData(newValue) {
        window.localStorage.setItem('data', JSON.stringify(newValue))
    }
},
watch:{
    data: {
        handler(val, newVal) {// watch中需要具体执行的方法
            this.setData(newVal)
        },
        deep: true,// true深度检测。例如数组对象中的某个属性改变执行handle方法
    }
}