（19）打鸡儿教你Vue.js

了解vue2.x的核心技术

建立前端组件化的思想

常用的vue语法

vue-router，vuex，vue-cli

使用vue-cli工具

Vue框架常用知识点

vue核心技术

集成Vue

重点看，重点记

模板语法，条件渲染，列表渲染

vuex，vue-router

v-bind属性绑定，事件绑定

Class与Style绑定

workflow工作流

单页面

Cli工具登录环境

vue常用模板语法
列表渲染、条件渲染
Class与style绑定
vue事件绑定与处理
vue计算属性computed, watch
vue-cli快速创建工程
vue的组件思想，代码规范
vue-router介绍
认识vuex，组件间的通信方式
前端调试方法，vue组件调试方法

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

or Wget:

wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash

export NVM_DIR="${XDG_CONFIG_HOME/:-$HOME/.}nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

开发环境：

ide，node.js，调式环境，工程环境

node --version

npm i -g vue-cli

vue --version

环境：

ide: webstrom，vscode

npm: vue-cli，webpack，cnpm，nvm

Chrome: Vue调式插件

Vue:

声明式渲染

条件渲染

列表

事件

热部署：gulp，webpack

认识样式：sass，postcss

模板语法

计算属性

Class，Style绑定

条件渲染

列表渲染

事件处理

表单输入绑定

组件基础，生命周期，模块化的思想

组件：

组件通信方式：props，$parent，emit event，Vuex

动画，vue-router, Vue-resource

常用api：

vue-use

props

dom

部署，服务器端渲染，打包编译

vue，基础概念，组件，api，部署

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

hello world!!

</body>

</html>

BootCDN

稳定、快速、免费的前端开源项目 CDN 加速服务

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .bg {

            color: red;

        }

    </style>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div class="bg">

    hello world!!

    {{msg}}

</div>

<script>

    new Vue({

        el: '.bg',

        data: {

            msg: 'hello vue!'

        }

    })

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .bg {

            color: red;

        }

    </style>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div class="bg" id="app">

    hello world!!

    {{msg}}

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            msg: 'hello vue!'

        }

    })

</script>

</body>

</html>

vue.js cdn使用

模板语法

vue的文件结构：

template

script

style

模板语法包含插值，指令

// 错

{{template}}

<script>

 new Vue({

  el: '#app',

  data: {

   msg: 'hello vue!!',

   count: 0,

   template: '<div>hello template</div>'

  }

})

</script>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .bg {

            color: red;

        }

    </style>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div class="bg" id="app">

    hello world!!

    {{msg}}

    <div v-html="template"></div>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            msg: 'hello vue!',

            template: '<div>hello dashucoding</div>'

        }

    })

</script>

</body>

</html>

<!DOCTYPE html>

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .bg {

            color: red;

        }

    </style>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div class="bg" id="app" v-bind:id="bg1">

    hello world!!

    {{msg}}

    {{count}}

    <div v-html="template"></div>

    <a v-bind:href="url">百度</a>

    <a :href="url">百度</a>

    <button type="button" v-on:click="submit()">加</button>

    <button type="button" @click="submit()">加</button>

</div>

<script>

    new Vue({

        el: '#app',

        data: {

            bg1: 'app-bind',

            msg: 'hello vue!',

            template: '<div>hello dashucoding</div>',

            url: 'http://www.baidu.com',

            count: 0

        },

        methods: {

            submit: function() {

                this.count++

            }

        }

    })

</script>

</body>

</html>

vue文件结构

插值语法{{msg}}

数据

js表达式

指令

@click

v-if

:href

计算属性与侦听器

计算属性：computed

侦听器：watch

使用场景：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

<div id="app">

    {{msg}}

    <p>{{msg1}}</p>

</div>

<script>

    var arr = 'da'

    var app = new Vue({

        el: '#app',

        data: {

            msg: 'Hello Vue!',

            another: 'another hello'

        },

        // 监听

        watch: {

            msg: function (newval, oldval) {

                console.log('newval is:'+newval)

                console.log('oldval is:'+oldval)

            }

        },

        computed: {

            msg1: function () {

                return 'computed:' + this.msg + "," + this.another + arr

            }

        }

    })

</script>

</body>

</html>

arr改变时不会变化，只有msg1里面的内容改变才会发生变化

watch异步场景，computed数据联动

条件渲染，列表渲染，Class与Style绑定

条件渲染：

v-fi

v-else

v-else-if

v-show

列表渲染：

v-for

<div id="app">

 <div v-if="count>0">

 </div>

 <div v-else>

 </div>

</div>

<div v-for="item in list">{{item}}</div>

<div v-for="item in list">{{item.name}}</div>

<script>

new Vue({

 el: '#app',

 data: {

 list: [{

 name:

 age

 },{

 }]

}

})

v-bind:style="{ 'color': 'red' }"

v-bind:style="styleMsg"

:class="{ 'active': ture }"

:style="styleMsg"

data: {

 style: {

 colord: red

 },

 styleMsg: {

  color: 'red',

  textShadow: '0 0 5px green'

 }

}

<div v-show=""

:class="[ 'active', 'add', 'more', { 'another' : ture } ]"

:style="styleMsg">

工程化，页面代码规范，调式vue

请点赞！因为你的鼓励是我写作的最大动力！

吹逼交流群：711613774