Vue.js深入浅出_1

---

参考

• 网易云课堂：Vue深入浅出（从入门到开发）
• 官网：Vue.js中文文档
• github：Vue Devtools
• google应用商场chrome版Vue插件
• 官网：sublime-text-3（挂了）
• github：多页面vue
• 官网：node.js
• 官网：npm
• 博客：vue webpack多页配置

---

目录

---

一、准备工作

1.代码编辑软件

• 安装sublime-text或者别的

2.npm

• 安装npm

3.Node环境

• 安装node.js

4.vue实时调试插件

• 安装chrome版或者其他版Vue.js devtools

---

二、安装

1.一期

推荐vue-cli安装脚手架，更适合实际开发
检查是否已经安装了node.js和npm

# 查看npm版本
$ npm -v
# 查看node.js版本
$ node -v

2.二期

输入以下命令

# 全局安装vue-cli，装在哪里都一样
$ npm install --global vue-cli

# 建一个新文件夹专门用来放project
# 创建一个基于webpack模板的项目
# 中间会有配置，不想设置可以直接回车跳过
# vue-router和vue-resource可以先不装
# unit-test也可以先不装
# 之后可以很方便地再装回去
$ vue init webpack my-project

# 如果上一步创建完之后如果选了yes就会自动执行（这条指令不用打也可以）
# 装配置的插件之类的东西
# 可以在my-project文件夹下package.json的devDependencies里面看到
$ npm install

# 进入my-project
$ cd my-project
# run完后千万不要把窗口关了，不然localhost会断开
$ npm run dev

脚手架：详情见Folder Structure
vue webpack多页配置可以参考多页配置
在浏览器地址栏输入localhost:8080会看到有字有图，反正不是空的

---

三、创建空项目

可以在down下来的项目中删除部分代码，改成空项目
进入src目录，找到App.vue。

1.App.vue

• 删除 <img src...>
• 删除<hello></hello>
• 删除import ...
• 删除export default的components里面的Hello
• 保存

进入components目录，找到Hello.vue

2.Hello.vue

• 删除Hello.vue
• 保存

刷新浏览器，是空白的。右键检查元素，没报错。

3.语法高亮

针对sublime-text

• tools -> command-palette
• 输入install package并回车
• 搜Vue Syntax Highlight并安装
• 关了当前的App.vue，再重新打开就会有语法高亮

---

四、基础语法

1.创建新文件

App.vue中<template>的<div>是容器，要加载组件。

• 在components目录下创建新组件Test.vue

2.结构

在Test.vue中，

（1）template

• 开头必须要用到<template></template>
• <template>里面要有一个容器<div></div>
• <div class="test">，可以在容器里加个标题<h1></h1>

（2）script

• 结构有了<template></template>后，还要有负责逻辑部分的<script></script>
• 因为要使得App.vue（相对于Test.vue来说是外部）引用Test组件，所以要用到export default
• default里面有name，通常组件name是组件名称的小写，即“test”

（3）style

• 样式<style></style>
• 可以加上<style scoped>，划分域。它只会影响当前组件里的样式，不影响其他样式。

import

在App.vue中，

• 为了使用内部Test.vue，所以要import一下

import Test from './components/test'

• export default的components里面写Test引用组件
• 激活当前组件，也就是要调用test，<test>要和Test.vue里面的name保持一致

<div id="app">
    <test></test>
</div>

3.属性

（1）name

name很重要，具体用途上面有写

（2）data

要用到return将对象返回，原因不清楚

data() {
    return {
        title: "Hello Vue.js!",
        user:{
            firstName:"Hemiah",
            lastName:"Wu"
        },
        showName:false,
        items:[
            {title:"item 1"},
            {title:"item 2"},
            {title:"item 3"}
        ]
    }
}

绑定

• 要在页面上展示data里面某个条目的值，可以用{{}}括起条目，绑定数据
• 如果要获取firstName的话，不能直接写{{firstName}}，系统会报错not defined。因为要先拿到user，所以写{{user.firstName}}

<h1>{{title}}</h1>
<p>{{user.firstName}}</p>

• 还有一种绑定数据的方式，就是利用v-text，和{{}}效果一样

<p v-text="user.lastName"></p>

条件

• v-if和v-else

<!-- v-if就是条件语句。执行语句时先判断showName的真假，
     如果为真，就执行v-if。否则，就看看有没有v-else -->
<p v-if="showName">{{user.firstName}}</p>

<!-- v-else，里面可以不写showName，
     因为上一条的v-if不执行时，会自动寻找v-else来执行 -->
<p v-else>Nobody</p>

循环

• v-for

<!-- v-for就是循环语句，item是变量（变量名字可以随便改），
     items是数组名 -->
<ul>
    <li v-for="item in items">{{item.title}}</li>
</ul>

（3）methods

方法，调用的函数。

methods: {
    greet:function(greeting) {
        alert(greeting);
    },
    pressKey:function() {
        console.log("Pressed...");
    },
    enterHit:function() {
        console.log("you pressed enter key!!");
    }
}

事件

• v-on
• 可以调用方法，如<button v-on:click="greet">。也可以传递参数，如<button v-on:click="greet('Hello Everybody)">
• alt.enter是指同时按下alt和enter

 <!-- v-on事件，methods用来保存事件，
      v-on可以调函数也可以传参 -->

 <!-- 点击事件 -->
<button v-on:click="greet('Hello Everybody')">Say Greeting</button>

<!-- 键盘事件 -->
<input type="text" v-on:keyup="pressKey" v-on:keyup.alt.enter="enterHit">

（4）computed

计算属性，和methods相似，但是比它更优化。computed主要用于计算部分，当然也可以用methods代替

<!-- computed 计算属性 -->
<label>First Name:</label>

<!-- v-model也是在绑定 -->
<input type="text" v-model="user.firstName">
<br>
<label>Last Name:</label>
<input type="text" v-model="user.lastName">
<br>

<h3>{{fullName}}</h3>

• 计算出firstName和lastName拼接而成的样子，并且展示出来

computed:{
    fullName:function() {
        // 获得的当前firstName和Lastname
        return this.user.firstName+" "+this.user.lastName;
    }
}

（5）props

传值的时候经常使用到

在Test.vue中，

<!-- props 属性 -->
<h2>{{msg}}</h2>

对应的<script>

props:{
    msg:{
        type:String,
        default:"默认就是当前这些文字"
    }
}

• 可以从外部直接传参给内部，是两个组件间协同工作的方式

在App.vue的<div id="app">里，

<test msg="这是新的属性值！"></test>

Test.vue里的{{msg}}可以接收到这是新的属性值！

---