(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工具登录环境

  1. vue常用模板语法
  2. 列表渲染、条件渲染
  3. Class与style绑定
  4. vue事件绑定与处理
  5. vue计算属性computed, watch
  6. vue-cli快速创建工程
  7. vue的组件思想,代码规范
  8. vue-router介绍
  9. 认识vuex,组件间的通信方式
  10. 前端调试方法,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,$parentemit eventVuex

动画,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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券