（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，$parent，emit event，Vuex

动画，vue-router, Vue-resource

常用api：
vue-use
props
dom

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

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

    
    


hello world!!

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

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

image.png

    
    
    
    



    hello world!!
    {{msg}}

    
    
    
    



    hello world!!
    {{msg}}

vue.js cdn使用

模板语法

vue的文件结构：
template
script
style

模板语法包含插值，指令

// 错
{{template}}

    
    
    
    



    hello world!!
    {{msg}}
    

    
    
    
    



    hello world!!
    {{msg}}
    {{count}}
    

    百度
    百度
    加
    加

vue文件结构
插值语法{{msg}}
数据
js表达式
指令

@click
v-if
:href

计算属性与侦听器

计算属性：computed

侦听器：watch

使用场景：

image.png

    
    
    




    {{msg}}
    
{{msg1}}

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

watch异步场景，computed数据联动

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

条件渲染：

v-fi
v-else
v-else-if

v-show

列表渲染：

v-for

{{item}}
{{item.name}}