（19）打鸡儿教你Vue.js

达达前端

发布于 2019-07-04 11:11:04

4810

发布于 2019-07-04 11:11:04

文章被收录于专栏：达达前端达达前端

了解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组件调试方法

image.png

image.png

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

image.png

image.png

image.png

开发环境： 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 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合

image.png

<!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

使用场景：

image.png

<!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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2019.07.03 ，如有侵权请联系 cloudcommunity@tencent.com 删除

vue.js

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度