vue.js学习-1-CSDN博客

vue.js学习-1-

1. MVVM

附上一张MVVM和MVC的关系图
在这里插入图片描述

2. vue基本代码结构

导包
引用vue.js的script文件

<script src="../node_modules/dist/vue.js"></script>

创建需要控制的元素
在这个区域内可以使用vm对象的数据或者方法
```
<div id="app">

</div>
```

创建vm对象

var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
        },
        methods: {
        }
    });

3. vm实例

el 指定要控制的区域
data 指定区域内需要用到的数据
methods 存储区域内需要用到的方法
在vm内访问vm中的属性或方法必须用this

4. 基本指令

插值表达式
用双重{ }包裹，可以在里面写插值表达式，引用vm实例的数据或者方法
```
<div id="app">
    <p>{{msg}}</p>
</div>
```
需要注意的是：
除了v-model是双向绑定数据，其他的一般都是单向：
单向：当vm实例中的数据变化，网页中的数据随之变化，但是网页中的数据变化，并不会使vm实例中的数据变化
v-cloak
v-cloak属性可以让网速不好时，不显示表达式的代码
v-text
设置该元素的文本值，是直接替换

v-html
设置该元素的html

vm实例

    var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            testHtml:"<a href='#'>点击</a>"
        },
        methods: {}
    });

html代码

<div id="app">
    <p>{{msg}}</p>
    <p v-cloak>{{msg}}</p>
    <p v-text="testHtml"></p>
    <p v-html="testHtml"></p>

</div>

运行效果：v-text属性只是简单的将字符串放置于标签内部了，而v-html是把字符串解析为了html，再放置于标签内部
在这里插入图片描述

v-bind

绑定元素属性（单向绑定）

v-bind的三种用法：

直接使用v-bind绑定
简化指令使用：代替v-bind
拼接绑定内容

以下是三种用法的代码实例:

	<!-- v-bind的三种用法 -->
    <!-- 直接使用v-bind -->
    <input type="text" name="" v-bind:value="msg">
    <!-- 使用 ' ：' 简化v-bind -->
    <input type="text" name="" :value="msg">
    <!-- 拼接表达式 -->
    <input type="text" name="" :value="msg + ' suffix'">

效果：

v-on

v-on用来绑定事件

事件的定义是写在vm的methods属性中的

var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            testHtml:"<a href='#'>点击</a>"
        },
        methods: {
            print(){
                console.log("打印方法");
            }
        }
    });

v-on有两种用法
1. 直接使用v-on
2. 使用 ’ @ ’ 简化v-on
html代码

<!-- v-on的三种用法 -->
    <!-- 直接使用v-on -->
    <input type="button" value="直接使用v-on" v-on:click="print">
    <!-- 使用  @  简化v-on -->
    <input type="button" value="使用@简化" @click="print">

script代码

var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            testHtml: "<a href='#'>点击</a>"
        },
        methods: {
            print() {
                console.log("打印方法");
            }
        }
    });

在这里插入图片描述

v-model
1. v-model是用来作数据双向绑定的，vue指令中只有这个一个可以用来作数据的双向绑定，其他的一般都是单向
2. 用法只有直接使用v-model属性
```
	
    <input type="text" v-model:value="msg">
```
3. 效果演示（注意看页面上的字是随着双向绑定的数据一起改变的）
4. 注意v-model只能应用于表单元素上，其他的元素是不起效果的

v-for

是循环迭代的指令

v-for有三种用法（需要使用index直接在参数中加index）

迭代普通数组

	<!-- v-for迭代普通数组 -->
    <div v-for="item in generalList">{{item}}</div>
    <div v-for="(item,index) in generalList">{{item}} ---- {{index}}</div>

效果演示
在这里插入图片描述

迭代特殊数组（对象数组）
vm实例代码：

var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            testHtml: "<a href='#'>点击</a>",
            generalList:[11,22,33,44,55,66],
            objList:[
                {id:1,name:"Abor"},
                {id:2,name:"XiaoHong"},
                {id:3,name:"XiaoMing"}
            ]
        },
        methods: {
            print() {
                console.log("打印方法");
            }
        }
    });

html代码

<div v-for="(user,index) in objList">{{user.id + '  '+ user.name+' --- '+index}}</div>

效果演示
在这里插入图片描述

循环遍历对象的属性
vm实例代码：

var vm = new Vue({
        el: "#app",
        data: {
            msg: "Hello Vue",
            testHtml: "<a href='#'>点击</a>",
            generalList:[11,22,33,44,55,66],
            objList:[
                {id:1,name:"Abor"},
                {id:2,name:"XiaoHong"},
                {id:3,name:"XiaoMing"}
            ],
            objFor:{
                id:3,
                name:"testObjFor",
                city:"BeiJing"
            }
        },
        methods: {
            print() {
                console.log("打印方法");
            }
        }
    });

html代码：

	<!-- v-for迭代循环对象属性 -->
    <div v-for="(val,key,index) in objFor">{{val +'  '+key+' --- '+index}}</div>

效果演示
在这里插入图片描述

迭代数字

<!-- v-for迭代数字 -->
    <p v-for="(item,index) in 5">{{'这是第'+item+'个标签'}}</p>

效果演示
在这里插入图片描述

v-if
1. v-if判断，若判断为false，则从dom中删除该元素
v-show
1. v-show设置元素的显示状态，若为false，则设置该元素的display为none
2. 注意与v-if的原理区别，用动图演示下区别

5. 事件修饰符

先上代码：
html

<div id="app">
    <div class="outerDiv bg-gray" @click="clickOuter">
        <div class="innerDiv bg-red" @click="clickInner">
            <input type="button" value="按钮" @click="clickBtn">
        </div>
    </div>
</div>

vm实例

var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
        },
        methods: {
            clickOuter(){
                console.log("outer");
            },
            clickInner(){
                console.log("inner");
            },
            clickBtn(){
                console.log("button");
            }
        }
    });

页面效果
在这里插入图片描述
在正常情况下，点击按钮，会依次触发按钮、红色div、灰色div的点击事件，如图

.stop
当按钮添加了stop后，会阻止元素的冒泡行为
即当点击按钮时，红色div和灰色div的点击行为会被阻止
```
<input type="button" value="按钮" @click.stop="clickBtn">
```
效果演示
.prevent
在元素事件上添加prevent后会阻止该元素的默认事件，例如a标签的页面跳转事件
```
    <a href="http://www.baidu.com" @click="clickLink">百度一下</a>
```
```
	clickLink(){
	     console.log("link");
	 }
```
a标签默认效果是这样的，触发点击事件，然后跳转页面

当在a标签的click事件添加prevent修饰符后，就不会跳转页面了，阻止了页面跳转这个默认事件，效果如下
.capture
当添加了capture事件修饰符的元素捕获到自身被子元素触发事件时，先执行本身的事件，再执行子元素的事件
如图所示，点击按钮：正常是按钮=>红色div=>灰色div
灰色div添加了capture之后就变为了灰色div=>按钮=>红色div
.self
当设置了self修饰符后，本身就不会被子元素所捕获了
在灰色div设置self修饰符，点击按钮之后，流程是按钮=>红色div，不会再执行到灰色div
.once
添加once事件修饰符后，本身的事件只会被触发一次

6. v-for 中key属性（number或者string）的使用

先上代码
vm实例

 var vm = new Vue({
        el: "#app",
        data: {
            msg: "",
            id: null,
            name: null,
            list: [
                {id: 1, name: "RED"},
                {id: 2, name: "BLUE"},
                {id: 3, name: "GREEN"},
                {id: 4, name: "YELLOW"},
                {id: 5, name: "WHITE"}
            ]
        },
        methods: {
            add() {
                this.list.unshift({id: this.id, name: this.name});
            }
        }
    });

不加key属性的html代码

<div id="app">
    id：<input type="text" name="" v-model:value="id">
    name：<input type="text" name="" v-model:value="name">
    <input type="button" value="添加" @click="add">
    <!-- 不加key属性 -->
    <p v-for="(color,index) in list" >
        <input type="checkbox" name="" id="">
        {{color.id}} ----- {{color.name}}
    </p>
</div>

演示一下不加key属性的bug

可以看到勾选的复选框，随着记录的添加并没有跟随着移动，这显然并不符合我们想要的预期
注意到，他仅仅是固定在了第几个记录，一直固定在第4行的

添加key属性的html

<p v-for="(color,index) in list" :key="color.id">
        <input type="checkbox" name="" >
        {{color.id}} ----- {{color.name}}
    </p>

演示一下没有bug的

7. 在vue中绑定样式

v-bind:class

单个class

<h1 :class='red'>这是一个邪恶的H1</h1>

使用数组容纳多个class

<h1 :class="['red', 'thin']">这是一个邪恶的H1</h1>

三元表达式

<h1 :class="['red', 'thin', isactive?'active':'']">这是一个邪恶的H1</h1>

嵌套对象

<h1 :class="['red', 'thin', {'active': isactive}]">这是一个邪恶的H1</h1>

直接使用对象

<h1 :class="{red:true, italic:true, active:true, thin:true}">这是一个邪恶的H1</h1>

v-bind:style

内联样式

<h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

将样式定义在vm数据对象上，在绑定数据

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
}

<h1 :style="h1StyleObj">这是一个善良的H1</h1>

绑定多个vm样式数据对象

data: {
        h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
        h1StyleObj2: { fontStyle: 'italic' }
}

<h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

8. 学习来源-黑马web前端的录播视频

需要JavaEE视频和前端视频的可以直接评论留言你的邮箱，我私发给你