Vue：从单页面到工程化项目

Vue 模板语法，条件渲染，列表渲染 vue-router vuex vue-cli 用到的网站： https://cn.vuejs.org/v2/guide/ https://cli.vuejs.org/zh/guide/ https://www.bootcdn.cn/

开发环境

1、IDE

• webstorm http://www.jetbrains.com/webstorm
• vscode https://code.visualstudio.com/

2、node环境

（1）nvm Node Version Manager node 多版本管理工具

[1] 安装 https://github.com/nvm-sh/nvm

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

vim ~/.bash_profile 或者全局配置在这个目录下 /etc/profile.d

# nvm配置
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

[2]使用

$ nvm --version  # 0.34.0
nvm --help
nvm ls
nvm ls-remote
nvm install 8.0.0
nvm deactivate  # 卸载时使用

$ node --version
v8.0.0

(2) cnpm淘宝镜像 http://npm.taobao.org/

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

(3)chrome插件 vue.js devtools

chrome vue插件下载地址 https://chrome-extension-downloader.com/

(4)vue-cli

$ npm install -g @vue/cli   # 全局安装
$ vue --version

环境检查

$ nvm --version
0.34.0
$ node --version
v8.16.0
$ npm --version
5.0.0
$ vue --version
2.9.6
$ npm ls -g --depth=0

模板语法

1、文件结构 -template -script -css

2、插值语法，数据，js表达式 3、指令（指令缩写） @click，v-if, :href

vueCDN: https://www.bootcdn.cn/

代码示例

    {{message}}          
    {{ count + 1 }}      
    {{template}}         
       
    
    
    百度
    百度   
    百度

    
    count+1
    count+1




new Vue({
    el: "#app",  // 绑定的对象
    
    // 数据
    data: {   
        message: "hello world!",
        count: 1,
        template: "
hello div
",
        url: "https://www.baidu.com"
    },

    // 方法
    methods: {
        add: function() {
            this.count += 1;
        }
    }

});

计算属性和侦听属性

软回车（换行不删除）：shift+enter

计算属性  computed   数据联动   监听多个属性 
侦听器    watch      异步场景   监听一个属性    

代码示例

    {{message}}
    {{fullMessage }}



var app = new Vue({
    el: "#app",
    data: {
        message: "hello"
    },
    
    // 侦听属性
    watch: {
        message: function(newVal, oldVal) {
            console.log(oldVal + " => " + newVal);
        }
    },
    
    // 计算属性
    computed: {
        fullMessage: function(){
            return `数据：${this.message}`;
        }
    }
});

渲染

条件渲染: v-if, v-else, v-else-if; v-show 列表渲染: v-for Class与Style绑定

代码示例

    
    
        count的值===0
    
    
        count的值 > 0
    
    
        count的值 < 0
    

    
    
        count的值 == 5
    
    
    
    
        {{item.name}} | {{item.age}}
    

    
    
        
            {{item.name}}: age>23
        
        
            {{item.name}}