Vue入门篇

Vue-cli开发环境搭建

1. 安装nodejs

2. 设置缓存文件夹

$ npm config set cache "D:vueProject
odejs
ode_cache"

3. 设置全局模块存放路径(设置成功后，之后用命令npm install XXX -g安装以后模块就在D:vueProject odejs ode_global里)

$ npm config set prefix "D:vueProject
odejs
ode_global"

4. 基于node js 安装cnpm淘宝镜像

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

5. 加入环境变量

D:vueProject odejs ode_global

6. 安装Vue

$ cnpm install vue -g

7. 安装vue-cli脚手架

$ cnpm install vue-cli -g

8. 根据模板创建项目

$ vue init webpack mytest

• Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这里不能使用大写，所以我把名称改成了vueclitest
• Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
• Author：作者，如果你有配置git的作者，他会读取。
• Install  vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
• Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
• setup unit tests with  Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
• Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

 

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

　　

9. 安装工程依赖模块

$ cd mytest && cnpm install

10. 启动项目

$ cnpm run dev

　　

属性绑定：

v-bind: 或者 :

<div id="root">
    <span v-bind:title="'this is '+title">hello world</span>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            title:"hello world"
        }
    })
</script>

　　

事件绑定：

v-on: 或者 @

<div id="root">
    <h1 @click="handleClick">{{msg}}</h1>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            msg: "hello",
        },
        methods: {
            handleClick: function () {
                this.msg = "world";
            }
        }
    })
</script>

　　

双向数据绑定：

v-model

<div id="root">
    <input v-model="content">
    <div>{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            content:"this is content"
        }
    })
</script>

　　

计算属性：

computed:

<div id="root">
    姓<input v-model="firstName">
    名<input v-model="lastName">
    <div>{{fullName}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:""
        },
        computed:{
            fullName:function () {
                return this.firstName+" "+this.lastName
            }
        }
    })
</script>

　　

侦听器：

watch

<div id="root">
    姓<input v-model="firstName">
    名<input v-model="lastName">
    <div>{{fullName}}</div>
    <div>{{count}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            firstName:"",
            lastName:"",
            count:0
        },
        computed:{
            fullName:function () {
                return this.firstName+" "+this.lastName
            }
        },
        watch:{
            firstName:function () {
                this.count ++
            },
            lastName:function () {
                this.count ++
            }
        }
    })
</script>

　　

v-if 和v-show的区别：

<div id="root">
    <div v-show="show">hello world</div>

    <button @click="handleClick">toggle</button>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            show: true
        },
        methods:{
            handleClick:function () {
                this.show = !this.show;
            }
        }
    })
</script>

　　条件为false时：v-if 这个元素不复存在，v-show style="display:none"

v-for:

<div id="root">
<ul>
    <li v-for="(i,index) in list" :key="index">{{i}}</li>
</ul>
</div>
<script>
    new Vue({
        el: "#root",
        data: {
            list:[1,2,3]
        },

    })
</script>

　　key的存在是为了提高遍历性能。

组件内使用v-for

<template>
  <ul>
    <item-component v-for="item in items" :item="item"></item-component>
  </ul>
</template>

<script>
  export default {
    props: ['item']
  }
</script>