vue_vue clone-CSDN博客

本文链接：https://blog.csdn.net/weixin_42995876/article/details/82829140

补充：环境安装和代码下载：
http://nodejs.org下载node
下载好安装包后，打开终端：
搜索：terminal.app 或者终端
terminal中：clear：清屏
node -v 查看版本号 --version
安装包：傻瓜式安装
node -v 版本更新了
终端：history：查看以往的命令

mac中右键可以整理项目，让各个文件夹对齐

代码地址：https://github.com/hemiahwu/vue-basic

master分支只有readme文件，其他课程代码都在分支上。查看分支：每个分支对应一个课程。

lesson-1：
vue：渐进式js框架
渐进式：易用，灵活，高效（没有很多限制，可以配合其他的插件与框架使用）
看官方文档

安装
兼容性：Vue 不支持 IE8 及以下版本
版本：目前（2018年09月23日13:47:56）最新稳定版本：2.5.17
推荐：我们推荐在你的浏览器上安装 Vue Devtools。
安装方法：
1.下载源码用script引入
2.cdn <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
3.npm npm install vue
4.cli
介绍

切换应用的时候，可以用搜索app的方式切换：eg：
搜索webstorm可以快速切换到该应用
lesson-2: 实例化vue对象

new Vue({
   el:"#vue-app", // element  需要获取的元素，一定是html中的根容器元素
    data:{
      name: "misitewu",
    }, // data:用于数据的存储(各种数据类型)
});

页面中{{ name }} 并没有花括号，是因为虚拟dom的问题

lesson-3: 数据和方法

     el: "#vue-app", // element  需要获取的元素，一定是html中的根容器元素
    data: {
        name: "misitewu",
        job:"web开发",
    }, // data:用于数据的存储(各种数据类型)
    methods:{
        greet:function (value) {
            return '早上好'+value;
        }
    },// methods（写死的）：存储方法:可以在html中使用
});

在methods中取到data中的属性：
直接用this.name就ok

lesson-4：数据绑定
数据中：
website:‘www.baidu.com’;
html中：
我的网站
并没有成功
去掉花括号也不对
我的网站
正确：

<a v-bind:href="website">我的网站</a>
<input type="text" v-bind:value="name">

data: {
        name: "misitewu",
        job:"web开发",
        website:"http:www.baidu.com",
        tag:'<a href="www.baidu.com">我是标签</a>',
    }, // data:用于数据的存储(各种数据类型)

把tag标签显示在页面上：

lesson-6:事件

<button v-on:click="addAge"> 长一岁</button>

addAge是事件，加不加括号都行的
插值时候的时候，一定要带括号，要不然不能区分是属性还是方法；
v-on的时候，知道是事件，加不加都行；传参需要括号；

<button @click="addAge()"> 长一岁</button>
等同于：
<button v-on:click="addAge()"> 长一岁</button>

mousemove事件：

lesson-6:修饰符
.stop:组织冒泡
.once:只执行一次
.prevent:阻止默认事件

lesson-7:键盘事件和键值修饰符

<input @keyup="logName" type="text">
<input @keyup.enter="logName" type="text">
<input @keyup.alt.enter="logAge" type="text">

可以使用链式，但是是并且的关系！

lesson-8：双向数据绑定
双向绑定：input，select，textarea
双向数据绑定一种方法：ref

html:
<input ref="name" @keyup="logName" type="text">
// ts:
logName:function () {
            console.log("正在输入你的名字");
            this.name=this.$refs.name.value;
        },

使用双向绑定：

<input v-model="name"  type="text">

lesson-9：计算属性

<h1>computed 计算属性</h1>
    <button @click="a++">A+</button>
    <button @click="b++">B+</button>
    <P>A:{{a}}</P>
    <P>B:{{b}}</P>
    <p>{{addToA()}}</p>
    <p>{{addToB()}}</p>
    <button @click="abc">abc按钮</button>
    <!--<p>{{abc()}}</p>-->

ts：
data: {
        a:0,
        b:0,
        age:20,

    }, // data:用于数据的存储(各种数据类型)
    methods:{
        addToA:function () {
            console.log("aaa");
            return this.a+this.age;
        } ,
        addToB:function () {
            console.log("bbb");
            return this.b+this.age;
        },
        abc:function () {
            console.log("abc");
        }
    },// methods（写死的）=>方法:可以在html中使用
    computed:{ // 计算属性，不是函数了，不能带括号
       /* addToA:function () {
            console.log("aaa");
            return this.a+this.age;
        } ,
        addToB:function () {
            console.log("bbb");
            return this.b+this.age;
        }*/
    }, // 搜索时候（耗时），使用计算属性；vue使用虚拟dom，就是把真实dom拷贝一份，操作的是虚拟dom，只有两者不同的话，才触发方法

html中属性方法都会执行的；但是函数是不受影响的；
eg：

<p>{{addToA()}}</p>   // 会执行的
<button @click="abc">abc按钮</button>   // 不会执行的

注：computed是计算属性，不用带括号了

lesson-10：动态绑定css样式
问题：为什么我修改了页面后，并没有生效啊！必须重新打开一个页面？

<h2 v-bind:class="{red:true,blue:true}">实例1</h2>

<button @click="changeColor=!changeColor">改变颜色</button>
    <button @click="changeLength=!changeLength">改变长度</button>
    <div v-bind:class="compClasses">
        <span>李凯水</span>
    </div>
// ts：
data: {
       changeColor:false,
        changeLength:false,

    }, // data:用于数据的存储(各种数据类型)
    computed:{ // 计算属性，不是函数了，不能带括号
        compClasses:function () {
            return {
                red:this.changeColor,
                changeLength:this.changeLength,

            }
        }
    },

// 跟这个有区别么？
 <div v-bind:class="{red:changeColor,changeLength:changeLength}">
        <span>李凯水</span>
    </div>

lesson-11：v-if：

<div v-if="error">我是error的时候</div>
<div v-else-if="success">我是success的时候</div>

  <div v-show="error">我是error的时候</div>  // display:none;

lesson-12:v-for:

<li v-for="user in users">{{user.name}},年龄：{{user.age}}</li>
<li v-for="(user,index) in users"></li>

渲染盒子有时候是没有用的，那么我可以使用：template，那么渲染盒子最后是没有的！
在：起步=>列表渲染=>v-for on a < template > 中

// 可以遍历数组，也可以遍历对象

<template v-for="user in users">
        <div v-for="(val,key) in user">
            <p>{{key}}---{{val}}</p>
        </div>
    </template>

lesson-13：实战demo：

<div class="img-box" v-bind:class="{bad:!canBang}">

    </div>
    <div class="progress-box">
        <div class="bar" v-bind:style="{width:progress+'%'}">

        </div>
    </div>
    <div class="btn-box">
        <button @click="bang" v-if="canBang">使劲敲</button>
        <button @click="reset">重新开始</button>
    </div>