mp-ui

小白的Vue学习笔记

学习地址：https://www.bilibili.com/video/BV1YE411A746
这是我在B站学习写的一些笔记，可能会有些乱，凑合看吧。

Vue

MVVM

Vue技术是MVVM开发模式的实现者

MVC——M(Model)、V(View)、C(Controller)

MVVM——M(model)、V(View)、VM (ViewModel)，连接视图和数据的中间件

其他MVVM实现者：

AngularJS
ReactJS
微信小程序

快速上手

https://cn.vuejs.org/v2/guide/

安装

【概念：CDN：内容分发网络，这是一种加速策略，能够自动从离自己最近的服务器上快速获取所需要的资源】

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

或者：


<script src="https://cdn.jsdelivr.net/npm/vue">script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

如果你喜欢交互式的东西，你也可以查阅这个 Scrimba 上的系列教程，它揉合了录屏和代码试验田，并允许你随时暂停和播放。

提示：也可以通过百度 cdn vue获取各种版本的地址：https://cdn.baomitu.com/vue

Hello World


<html>
<head>
    <meta charset="UTF-8">
    <title>vuetitle>

head>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript">script>

<body>
    <div id="app">
        <span>
            {
    { title }}
        span>
        <input type="text" v-model="title">
    div>

body>
html>

<script>
    const app = new Vue({
      
        el: "#app",
        data: {
      
            title: 'hello world'
        }

    });
script>

运行效果展示：

当在输入框中输入内容时，左边的span标签内容也跟着改变

这就是MVVM架构中VM的妙处！（ViewModel能够观察到数据的变化，并对视图对应的内容进行更新）

总结：

html中要有一个div，id为app（当然其他也行）
js中要有一个Vue对象

讲解


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        欢迎你，{
    {age}}岁的{
    {name}}！   
    div>
body>
html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script>
    new Vue({
      
        el:"#app",	//el指的是element，里面放元素的解析器，#app就代表id值为app的元素
        data:{
      			//html中通过差值表达式获取data中存放的数据
            age:18,				//以后，这里的数据都是通过发送ajax请求来获得
            name:"小明"
        }
    });
script>

插值表达式

插值表达式是用在html中被绑定的元素中的。目的是通过差值表达式来获取Vue对象的属性和方法。

属性通过data提供，方法通过methods提供。

例如运行下面的代码，会直接弹出一个框。


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        {
    {sayHi()}}  
    div>
body>
html>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script>
    new Vue({
      
        el:"#app",
        methods:{
      
            sayHi:function (){
      
                alert("Hello World!");
            }
        }
    });
script>

除此之外，还可以这么使用

<div id="app">
    {
    {sayHi()}}<br>
    {
    {[1,2,3,4,5][1]}}<br> 
    {
    {
    {name:"小明",age:18}.name}}<br> 
div>

显示在页面中的内容是


2
小明

Vue中的关键字

这些关键字都是作为html页面中标签中的属性来使用

v-model

【MVVM双向数据绑定】将标签的value值与vue实例中的data属性进行绑定。

这里的代码举例和Hello World 中的一样。

v-on

【事件绑定】通过配合具体的事件名，来绑定vue中定义的函数。

<input type="text" v-on:input="changeTitle" />

v-on叫绑定事件，事件是input，响应行为是changeTitle。也就是说，当input元素发生输入事件时，就会调用vue里定义的changeTitle方法

例子：


<html lang="ch-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <button v-on:click="show()">Hello Worldbutton>
    div>
body>
html>
<script src="vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        methods:{
      
            show:function (){
      
                console.log("Hello World");
            }
        }
    });
script>

补充：

methods里面放的函数，可以加一个event参数，event就代表当前事件，然后可以用event.target 来获取当前事件的对象，然后再通过event.target.value来获取当前事件的对象的value属性。

用法举例：每改变输入框中的内容都将它打印到控制台


<html lang="ch-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <input type="text" v-on:input="show"> 
    div>
body>
html>
<script src="vue.js">script>
<script>
    new Vue({
        
        el:"#app",
        methods:{
        
            show:function (ev){
          //不一定要是event，随便一个名字都行
                console.log(ev.target.value);
            }
        }
    });
script>

this的用法，主要在methods里面的函数，用this.属性可以直接访问和修改data里的数据。

//下面2个方法都可以直接获取data里的属性
this.$data.属性名
this.属性名
//下面2种方法可以直接调用methods里的方法
this.方法名();
this.$options.methods.方法名();

v-on还可以简写成@，比如v-on:input可以写成@input。

v-bind

【属性绑定】内容才可以用差值表达式，属性不可以，比如下面这行是没有用的。

<a href="{
      {link}}">a>

注意：差值表达式不能写在html的标签中，不能作为属性的一部分。

正确做法：v-bind:标签属性="值"

<a v-bind:href="link">链接a>

扩展：v-bind可以简写成":"

<a :href="link">链接a>

v-once

加上这个标签之后，里面的差值表达式只获取一次数据。之后的数据变化不影响此插值表达式的值。

v-html和v-text

v-html会将vue中的属性的值作为html的元素来使用
v-text会将vue中属性的值只作为纯文本来使用

例子：


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <span v-html="val">span>  <br>
        <span v-text="val">span>
    div>
body>
html>
<script src="vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            val:""
        }
    });
script>

效果：

分支语句

点击查看官方文档

v-if

v-else-if

v-else

示例代码如下：


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <div>
            <input type="checkbox"  id="temp1" v-model="temp1"> <label for="temp1">temp1label>
            <input type="checkbox"  id="temp2" v-model="temp2"> <label for="temp2">temp2label>
        div>
        <div>
            <div v-if="temp1">看到v-if的内容div>  
            <div v-else-if="temp2">看到v-else-if的内容div> 
            <div v-else="">看到v-else的内容div>	
        div>
    div>
body>
html>

<script src="../vue.js">script>
<script>
    new Vue({
      
       el:"#app",
       data:{
      
           temp1:true,
           temp2:false
       }
    });
script>

v-show

实现的效果跟v-if是一样的，都是当该属性的值是true时，显示该标签的内容，为false时不显示。

区别是，v-show隐藏内容的原理是直接修改标签的css样式：display:none，而v-if则是直接删除掉那个标签，所以，在效率上，v-show更好一点。

循环语句v-for

遍历普通的数组

举例：


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <ul>
            <li v-for="v in nums">{
    {v}}li>
        ul>
    div>
body>
html>

<script src="../vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            nums:[1,2,3,4,5,6]
        }
    });
script>

显示效果：

{ {v}}

nums

v

{ {v}}-->{ {i}}

v

value

i

index

第二条，(v,i)得到的v是值i是下标是他自己规定的，第一个参数是值，第二个参数是下标，如果你就是想第一个参数是下标也是可以的，直接在语句后面指定：
```
{
      {i}}-->{
      {v}}li>
```

遍历对象

举例子：


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <ul>
            <li v-for="v in student">{
    {v}}li>
        ul>
    div>
body>
html>

<script src="../vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            student:{
      
                name:"张三",
                age:18
            }
        }
    });
script>

{ {v}}

student

value

{ {v}}--{ {k}}

v

value

k

key

{ {v}}--{ {k}}--{ {i}}

v

value

k

key

i

index

遍历对象数组

看例子：


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <ul>
            <li v-for="student in students">
                <div v-for="(v,k) in student">{
    {k}}--{
    {v}}div>
            li>
        ul>
    div>
body>
html>

<script src="../vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            students:[{
      
                name:"张三",
                age:18
            },{
      
                name:"李四",
                age:19
            },{
      
                name:"王五",
                age:20
            }
            ]
        }
    });
script>

事件

范例1

点击按钮，数字加1


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <div>
            当前数字：{
    {count}}
        div>
        <button type="button" @click="increase()">增加button>
    div>
body>
html>

<script src="vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            count:0
        },
        methods:{
      
            increase:function (){
      
                this.count+=1;
            }
        }
    });
script>

范例2

鼠标移动到那里，显示鼠标的X坐标和Y坐标


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">

        <div style="width: 400px;height: 300px;background-color: blanchedalmond" @mousemove="move">div>
        X:{
    {px}}  Y:{
    {py}}
    div>
body>
html>

<script src="vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            px:0,
            py:0
        },
        methods:{
      
            move:function (event) {
      
                this.px = event.clientX;
                this.py = event.clientY;
            }
        }
    });
script>

参数绑定

范例1那里，可以传入一个步长，代表每点击一次都增加对应的数字。

<div id="app">
    <div>
    当前数字：{
    {count}}
    div>
    <button type="button" @click="increase(2)">增加button>
div>

new Vue({
     
        el:"#app",
        data:{
     
            count:0
        },
        methods:{
     
            increase:function (step){
     
                this.count+=step;
            }
        }
    });

★ 如果想传入事件对象，可以在括号里面输入$event

例如范例2：

<div style="width: 400px;height: 300px;background-color: blanchedalmond" @mousemove="move($event)">div>

停止鼠标事件

法一：在函数里加一行代码

<span v-on:mousemove="dummy">停止鼠标事件span>

dummy:function (ev) {
     
    ev.stopPropagation();
}

法二：直接在标签的参数里面加一个属性（这就叫事件修饰符）

<span v-on:mousemove.stop>停止鼠标事件span>

事件修饰符

查看官方文档


<a v-on:click.stop="doThis">a>


<form v-on:submit.prevent="onSubmit">form>


<a v-on:click.stop.prevent="doThat">a>


<form v-on:submit.prevent>form>



<div v-on:click.capture="doThis">...div>



<div v-on:click.self="doThat">...div>

按键修饰符

查看官方文档

<input v-on:keyup="submit">


<input v-on:keyup.enter="submit">

vue改变内容

常规：使用差值表达式

比如上面的范例1，可以加上{ {count>10?"大于10":"不大于10"}}来显示“大于10”/“不大于10”，当count大于10时，将会显示"大于10"

计算属性：`computed`

例子：


<html lang="ch-CN" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        {
    {getDate()}}<br>
        {
    {getDate1}}
    div>
body>
html>

<script src="vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        methods:{
      
            getDate:function (){
      
                return new Date();
            }
        },
        computed:{
      
            getDate1:function (){
      
                return new Date();
            }
        }
    });
script>

首先，应该明确，getDate是一个函数，而getDate1只是一个属性而已！

所以差值表达式那里{ {getDate1}}不能加括号！！

可以理解为：每一次getDate() 都会重新执行那个函数，然后取返回值，而getDate1 只是第一次会执行那个函数取返回值，之后再执行的话就直接取缓存里的数据了！

使用计算属性可以提高vue的效率（一些常用的函数，可以缓存起来，下次调用时直接获取缓存里的返回值）！

监控属性：`watch`

通过watch里给data里的属性绑定一个函数，当属性的值发生变化时，该函数就会调用。

例如：当输入框的内容发生改变时，控制台输出一句话。

<div id="app">
    {
    {title}}
    <div>
    	<input v-model="title">
    div>
div>

new Vue({
     
    el:"#app",
    data:{
     
        title:"hello"
    },
    watch:{
     
        title:function (){
      //这里的key值需要和data里的key一样
            console.log("改变了");
        }
    }

});

◆扩展：watch里放的函数可以绑定两个参数newValue和 oldValue

title:function (newValue,oldValue){
     
    console.log(oldValue + "-->" + newValue);
}

vue改变样式

通过修改`class`属性

`class`的动态绑定

最常规的方法就是通过改变class属性来改变样式。所以我们通过v-bind:class属性来设置class。

奇怪的知识：v-bind:class的值可以是json格式，需要key值为class值，value为boolean值的属性。

如v-bind:class="{red:true,green:false}"就表示这个元素的class属性包含red而不包含green

通过前面数据绑定的方式，可以在data里加一个temp ，然后标签内属性设置为v-bind:class="{red:temp}"

上代码：


<html lang="ch-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">


    <style>
        .mydiv {
      
            margin: 20px;
            width: 400px;
            height: 300px;
            background-color: darkgrey;
        }

        .red {
      
            background-color: red;
        }

        .green {
      
            background-color: green;
        }

        .blue {
      
            background-color: blue;
        }

    style>

head>


<body>
<div id="app">
    <div class="mydiv" v-bind:class="{red:r,green:g,blue:b}">div>
    <button @click="cr()">打开/关闭redbutton>
    <button @click="cg()">打开/关闭greenbutton>
    <button @click="cb()">打开/关闭bluebutton>
div>
body>
html>


<script src="../vue.js">script>
<script>
    new Vue({
      
        el: "#app",
        data: {
      
            r: false,
            g: false,
            b: false
        },
        methods: {
      
            cr: function () {
      
                this.r = !this.r;
            }, cg: function () {
      
                this.g = !this.g;
            }, cb: function () {
      
                this.b = !this.b;
            }
        }
    });
script>

使用`computed`优化

前面说了，computed里面其实都是属性，所以computed可以直接返回一个json，然后被v-bind:class里直接引用。

例子：（基于上面的代码修改）

<div class="mydiv" v-bind:class="myclass">div>

computed:{
     
    myclass:function (){
     
        return {
     
            red:this.r,
            green:this.g,
            blue:this.b
        }
    }
}

通过双向数据绑定

这就更有意思了，可以直接在一个input框里通过v-model绑定一个color属性，然后再给div的v-bind:class绑定那个color。

最终的效果是：输入框输入red时，div变红色，输入green时绿色


<html lang="ch-CN" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
    <style>
        .mydiv {
      
            margin: 20px;
            width: 400px;
            height: 300px;
            background-color: darkgrey;
        }

        .red {
      
            background-color: red;
        }

        .green {
      
            background-color: green;
        }

        .blue {
      
            background-color: blue;
        }
    style>
head>
<body>
<div id="app">
    <div class="mydiv" v-bind:class="color">div>
    <input type="text" v-model="color">
div>
body>
html>
<script src="../vue.js">script>
<script>
    new Vue({
      
        el: "#app",
        data: {
      
            color:""
        },

    });
script>

`v-bind:class`的一些细节

值可以是json格式的数据（正如上面演示的那样），其中key为要使用的class，value为boolean型数据，当为true时时使用这个class
值也可以是数组类型，如表示class同时属性同时绑定data里的color和width，注意：如果要绑定多个data里的数据，不能写多个v-bind:class，不起作用的。
不能这么写：

通过修改`style`属性

修改html的样式，除了外部引入（直接在外部定义了css的样式然后通过修改class属性来改变样式），还有内嵌引入，就是直接在标签里面使用style属性！


<html lang="ch-CN">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <link rel="shortcut icon" href="" type="">
head>
<body>
    <div id="app">
        <div style="background-color: aqua;width: 400px;height: 300px">普通的stylediv>
        <div v-bind:style="{
        backgroundColor:color,width:width,height:height}">Vue的stylediv>
    div>
body>
html>
<script src="../vue.js">script>
<script>
    new Vue({
      
        el:"#app",
        data:{
      
            color:"gray",
            width:"400px",
            height:"300px"
        }
    });
script>

注意：

v-bind:style是json格式的键值对，其中value值是绑定Vue中data里的数据的
key中所有的由-拼接成的单词都改成驼峰式命名，比如style中的background-color，Vue中就写成backgroundColor，这一点和我们DOM中的操作是一样的
```
document.getElementById("aa").style.backgroundColor = "blue";
```
也可以使用computed属性，但computed返回值必须要是json
可以使用数组将多个json或者computed合并在一起

虚拟DOM和diff算法

Vue高效的核心。

Vue实例

var v1 = new Vue();

指的就是Vue的实例。

实例属性

属性是指在data和computed里定义的，而方法是在method里定义的。实例属性是指Vue对象自己的属性，比如之前接触的el、data、computed、watch … 这些不能直接通过Vue对象.的方式获得的。***如果要访问，必须要加上$***，如v1.$data

v1.$data.title可以写成v1.title

官方文档链接

$refs

给html的标签加上ref属性，那么在Vue中可以直接根据ref属性的值来获取这个标签，和id的用法有点像。

<div id="app">
    <div ref="div1">红红火火恍恍惚惚div>
    <button @click="change()">点我button>
div>

new Vue({
     
    el:"#app",
    methods:{
     
        change:function (){
     
            this.$refs.div1.innerHTML = "哈哈哈哈哈哈哈哈哈哈或或或或或或或或或或或或或或或或或";
        }
    }
});

总结：可以直接通过vue实例.$refs.标签的ref属性值来操作这个标签体。

和id的区别：当有多个标签的id值相同时不会报错，而ref会报错。

$mount

实现Vue对象与页面元素的动态绑定，之前都是通过el。官方文档

<div id="app">

div>
<button onclick="bc()">点我button>

var v1 = new Vue({
     
    template:"Hello World
"
});
function bc(){
     
    v1.$mount("#app");
}

实现效果：点击按钮就显示Hello World，其实template是干嘛用的我也不知道（在下面的组件那里可能会深有体会）

组件

Vue的一大特性：组件化，就是可以将一个Vue对象注册成一个组件，反复使用！

要想实现组件化，必须要注册组件，注册组件有2种方式：全局注册、本地注册

全局注册

注册组件时，使用Vue的静态方法：Vue.component("组件名称", 对象)

使用组件时，直接使用标签即可：<组件名称>，但是，必须注意：必须要在已经被Vue绑定的标签里面才能使用组件，要不然不起作用！

例子：

<div id="app">
	<model1>model1>
div>

Vue.component("model1",{
     
	template: "Hello World
"
});
new Vue({
     
	el:"#app"
});

进阶版：既然组件也是一个Vue的实例，所以也可以加上data属性和methods属性。

Vue.component("model1",{
     
    template: "
",
    methods:{
     
        cbtn:function (){
     
            alert("哈哈哈哈哈哈哈");
        }
    }
});

在template属性里面用插值表达式来引用data里的内容有点不行，会报错

Vue.component("model1",{
     
    template: "{
     {title}}
",
    data:{
     
        title:"哈哈哈哈哈哈哈"
    }
});

解决方案是：

Vue.component("model1",{
     
    template: "{
     {title}}
",
    data:function (){
     
        return {
     
            title:"哈哈哈哈哈哈哈"
        }
    }
});

这里需要稍微注意一下！！！！！！！！！

本地（局部）注册

就是直接加一个实例属性component而已，和全局的区别，懂的都懂！

new Vue({
     
    el: "#app",
    components: {
     
        model1: {
     
            template: "{
     {title}}
",
            data: function () {
     
                return {
     
                    title: "哈哈哈哈哈哈哈"
                }
            },
            methods: {
     
                func: function () {
     
                    alert("红红火火恍恍惚惚");
                }
            }
        }
    }
});

Vue作为组件使用的注意事项

data的写法：平时创建Vue实例时的data属性直接是一个json对象，而作为组件时，data属性必须是一个函数，返回值才是json对象。
template是将内容展现在页面上的一个键，值是一个字符串。注意：template里有且只有一个根标签，不能没有或者多个根标签并列！，就比如你不可以这样：
```
<div>{
      {title}}div><button @click='func()'>点我button>
```
但是可以这样（加上了根标签）
```
<div><div>{
      {title}}div><button @click='func()'>点我button>div>
```

优化

注册组件的时候甚至可以这样，先把json定义在外面，然后在里面再引用。

var model1 = {
     
    template: "{
     {title}}
",
    data: function () {
     
        return {
     
            title: "哈哈哈哈哈哈哈"
        }
    },
    methods: {
     
        func: function () {
     
            alert("红红火火恍恍惚惚");
        }
    }

};
new Vue({
     
    el: "#app",
    components: {
     
        model1: model1
    }
});

生命周期

官方文档

官方API

new Vue({
     
    el:"#app",
    beforeCreate(){
     
        console.log("beforeCreate")
    },
    created(){
     
        console.log("created")
    },
    beforeMount(){
     
        console.log("beforeMount")
    },
    mounted(){
     
        console.log("mounted")
    },
    beforeUpdate(){
     
        console.log("beforeUpdate")
    },
    updated(){
     
        console.log("updated")
    },
    beforeDestroy(){
     
        console.log("beforeDestory")
    },
    destroyed(){
     
        console.log("destory")
    }
});

也可以是这种形式

beforeCreate:function (){
     
    console.log("beforeCreate")
}

vue-cli

vue-cli骨架

CLI（command line interfaces ）命令行接口。在进行Vue项目开发时，可以选择不同的Vue模板进行项目的搭建，比如simple、webpack-simple、webpack、browserify/browserify-simple等；vue-cli是官方提供的一个脚手架（预先定义好的目录结构及基础代码，咱们在创建 Maven 项目时可以选择创建一个骨架项目，这个骨架项目就是脚手架），用于快速生成一个vue的项目模板。

要想使用vue-cli，得先安装node.js
node.js是一个快要让前端运行在node.js提供的服务器上的一个工具，换句话说，就是提供了一个服务器。

node.js

下载

官网：https://nodejs.org/zh-cn/download/

安装无脑下一步。

检查是否安装成功：cmd输入node -v

使用node.js安装vue-cli

npm install vue-cli -g

参数解释：

npm：是指使用node.js的命令
install：安装
vue-cli：要安装的工具
-g：全局

如果安装比较慢，可以使用淘宝镜像

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

然后安装

cnpm install vue-cli -g  # 把npm替换成cnpm

使用vue-list下载项目骨架来搭建我们的项目

使用以下命令可以列出当前官方提供的骨架，然后就可以利用官方提供的这些骨架来创建我们的项目

vue list

搭建项目：

vue init webpack-simple myvuedemo

其中webpack-simple是要使用的模板名称，myvuedemo是要创建的项目名称，完成后，会自动在当前文件夹创建一个文件夹，名称为“项目名称”

项目生成后，输入cd 项目名称，进入项目文件夹

然后npm install，安装项目所需的依赖

最后npm run dev，以开发的模式启动项目。

启动后就能在浏览器中输入http://localhost:8080/ 即可访问。

项目完成后，运行npm run build 来发布项目

webpack-simple

项目内结构

index.html

无论前端页面有多复杂，index.html都只有11行


<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>myvuedemotitle>
  head>
  <body>
    <div id="app">div>
    <script src="/dist/build.js">script>
  body>
html>

实际的内容已经被打包进/dist/build.js里面

vue.js
整个vue项目的入口函数

import Vue from 'vue'
import App from './App.vue' //导入了App.vue组件

new Vue({
       
  el: '#app', //让当前vue对象绑定页面上id是app的那个div
  render: h => h(App) //让App.vue的内容出现在该div中
})

App.vue
这种以.vue为扩展名的文件，实际上就是一个Vue对象。在这里这种组件也称为Vue组件。

.vue文件的组成结构

idea里可以安装vue.js插件来添加对.vue文件的支持

一个Vue文件由

小白的Vue学习笔记

Vue

MVVM

快速上手

安装

Hello World

讲解

插值表达式

Vue中的关键字

v-model

v-on

补充：

v-bind

v-once

v-html和v-text

分支语句

v-if

v-else-if

v-else

v-show

循环语句v-for

遍历普通的数组

遍历对象

遍历对象数组

事件

范例1

范例2

参数绑定

停止鼠标事件

事件修饰符

按键修饰符

vue改变内容

常规：使用差值表达式

计算属性：computed

监控属性：watch

vue改变样式

通过修改class属性

class的动态绑定

使用computed优化

通过双向数据绑定

v-bind:class的一些细节

通过修改style属性

虚拟DOM和diff算法

Vue实例

实例属性

$refs

$mount

Hello World

组件

全局注册

Hello World

本地（局部）注册

Vue作为组件使用的注意事项

优化

生命周期

vue-cli

vue-cli骨架

node.js

下载

使用node.js安装vue-cli

使用vue-list下载项目骨架来搭建我们的项目

webpack-simple

项目内结构

.vue文件的组成结构

本地注册

组件之间的参数传递

父传子

子传父

发送ajax请求

安装Axios模块

使用Axios

发送ajax

服务器端（springmvc）解决跨域问题

路由（组件之间的跳转）

安装路由模块

设计路由界面

创建静态路由表

引入路由模块并使用

你可能感兴趣的:(Web前端开发,vue,js)

计算属性：`computed`

监控属性：`watch`

通过修改`class`属性

`class`的动态绑定

使用`computed`优化

`v-bind:class`的一些细节

通过修改`style`属性