VUE-基础使用

最新推荐文章于 2024-06-15 14:41:39 发布

rolanannn

最新推荐文章于 2024-06-15 14:41:39 发布

阅读量92

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/rolanannn/article/details/130934213

版权

1.什么是Vue.js

（1）Vue.js是一套构建用户界面的渐进式框架，vue采用的是自底向上增量开发的设计，他的核心库只关注视图层，还便于与第三方库或既有项目整合。

（2）Vue.js是前段三大主流框架之一，另外两个是Angular.js 和 React.js

2.为什么学习框架

（1）提高开发效率，节约时间成本

（2）提高开发效率的发展历程：原生js -> jquery -> 前段模版引擎 -> Vue.js

（3）能够帮助我们减少不必要的dom操作，提高渲染效率，双向指定绑定的概念，通过框架提供的指令，我们可以只关心数据的业务逻辑

3.框架和库的区别

（1）框架：是一套完整的解决方案对项目的入侵性较大，项目如果需要更换框架，需要重构整个项目

（2）库（插件）：只提供某一个小功能，对项目侵入性较小，如果某个库无法完成需求，很容易切换别的库来实现。

4.MVC与MVVM的区别

（1）MVC 是后端的分层开发概念;
（2）MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、VM ViewModel;

5. Vue.js的代码结构

（1)引入vue.js
（2)写视图层，我们要展示的内容
（3)实例化Vue()

el：这个控制是哪块视图

data：存放数据

methods：放我们的方法

<div id="app">

        

        {{ message }}

    </div>

    

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

    <script>

        // 调度层

        var vm = new Vue({

            // vue控制的区域

            el: '#app',

            // data参数存放我们的数据，这一层就是mvvm里的model层

            data: {

                message: 'Hello Vue!'

            },

methods:{

            }

        })

    </script>

注意：都是通过this对象去拿的，通过this也可以调用方法。写方法的时候我们需要注意this的指向问题。

6. 插值表达式、v-cloak、v-text、v-html

如何获取变量值呢？

（1）插值表达式｛｛｝｝可以在前后插入一些内容

（2）v-text 会替换掉元素里的内容

（3）v-html 可以解析富文本

示例：
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-clock防止界面闪烁</title>
<style>
[v-cloak]{
display: none;
}
</style>
</head>

<body>

<div id="app">

<p v-cloak>
-----------{{ message }}---------------
</p>



<p v-text='message'>------------------------</p>
<p v-text='html'>------------------------</p>

<p v-html = 'html'>1111</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
html:'<h1>这是一个很大的标题</h1>'
}
})
</script>
</body>

</html>

7. v-bind

（1）界面元素属性值的绑定

（1）括号里不加引号的都是我们data里的数据读取

（2）如果像使用字符串需要加引号

（3）里面可以写表达式

（4）里面也可以调用定义好的方法拿到的是方法的返回值

示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>v-bind这指令用于属性的绑定</title>
</head>

<body>

<div id="app">

{{ message }}

<button :title="nihao">按钮</button>
<input type="text" v-bind:value="message">
</div>


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
flag: false,
nihao:'你好世界'
}
})
</script>
</body>
</html>

8. v-on

（1）进行事件的绑定

（2）简写@

（3）实现跑马灯效果

跑马灯：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<script src="./vue-2.4.0.js"></script>

</head>

<body>

<div id="app">



<button v-on:click="start">开始</button>

<button @click="stop">暂停</button>

<h2>{{msg}}</h2>

</div>

</body>

<script>

let app = new Vue({

el:"#app",

data:{

// msg:"这或许是一长段即将要被跑跑马灯的大段长难文字",

// msg:"/././././././././././././././././././././././././././././././",

// msg:"/*-/*-/*-/*-/*-/*-/*-/*-/*-/*-/*-/*-",

msg:"ORZ ORZ ORZ ORZ ORZ ",

timer:null

},

methods:{

start(){

clearInterval(this.timer)

this.timer = setInterval(() => {

var first = this.msg[0]

var last = this.msg.substring(1)

console.log(first);

console.log(last);

this.msg = last + first

}, 50);

},

stop() {

clearInterval(this.timer)

}

}

})

</script>

</html>

9.事件修饰符

（1）.stop阻止冒泡

（2）.prevent阻止默认事件

（3）.capture添加事件监听器时使用捕获模式

（4）.self只当事件作用在该元素本身时触发回调

（5）.once事件只触发一次

示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件修饰符</title>
<style>
.box {
height: 200px;
background-color: green;
}
.sub-box {
height: 100px;
background-color: red;
}
</style>
</head>

<body>
<div id="app">
<div class="box" @click='clickBox'>
<button @click.stop='clickBtn'>点我</button>
</div>
<a href="http://www.baidu.com" @click.prevent='clickA'>baidu</a>
<h1>capture事件修饰符</h1>

<div class="box" @click='clickBox'>
<div class="sub-box" @click.capture='clickSubBox'>
<button @click='clickBtn'>事件捕获</button>
</div>
</div>

<h1>self事件修饰符</h1>
<div class="box" @click='clickBox'>
<div class="sub-box" @click.self='clickSubBox'>
<button @click='clickBtn'>事件捕获</button>
</div>
</div>

<button @click.once='clickBtn'>once</button>

</div>

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

<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {},
methods: {
clickBox() {
console.log('点击了盒子')
},
clickBtn() {
console.log('点击了按钮');
},
clickA() {
console.log('点击了a标签')
},
clickSubBox() {
console.log('点击了sub box')
}
},
})
</script>
</body>
</html>

10. v-model数据双向绑定

（1）作用：数据双向绑定

（2）注意：绑定的是表单控件

计算器示例：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>计算器</title>
</head>

<body>
<div id='app'>
<input type="text" v-model:value='value1'>
<select v-model:value='opration'>
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" v-model:value='value2'>
<button @click='calc'>=</button>
<input type="text" v-model:value='result'>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
value1: '',
value2: '',
opration: '+',
result: ''
},
methods: {
calc() {
switch (this.opration) {
case '+':
this.result = Number.parseFloat(this.value1) + Number.parseFloat(this.value2);
break;
case '-':
this.result = Number.parseFloat(this.value1) - Number.parseFloat(this.value2);
break;
case '*':
this.result = Number.parseFloat(this.value1) * Number.parseFloat(this.value2);
break;
case '/':
this.result = Number.parseFloat(this.value1) / Number.parseFloat(this.value2);
break;
}
}
}
})
</script>
</body>
</html>

11. Vue中样式的使用

使用class样式:

（1）数组

（2）三木表达式

（3）数组内置对象（对象的键是样式的名字，值是boolean类型）

（4）直接通过对象

示例：

<!DOCTYPE html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>class样式的使用</title>
<style>
.first {
color: red;
}

.second {
font-size: 25px
}
</style>
</head>

<body>
<div id='app'>
<p class="first second">这是一段文字...</p>

<p :class="[pClass,flag?'second':'']">这是一段文字...</p>


<p :class="[pClass,{'second':flag}]">这是一段文字...</p>

<p :class="{'first':false,'second':true}">这是一段文字...</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 调度层
var vm = new Vue({
// vue控制的区域
el: '#app',
// data参数存放我们的数据，这一层就是mvvm里的model层
data: {
message: 'Hello Vue!',
pClass: 'first',
flag: true
}
})
</script>
</body>
</html>

使用内联样式

1.直接在元素上通过 :style 的形式，书写样式对象
2.将样式对象，定义到 data 中，并直接引用到 :style 中
（1)在data上定义样式
（2)在元素中，通过属性绑定的形式，将样式对象应用到元素中
3.在 :style 中通过数组，引用多个 data 上的样式对象
（1)在data上定义样式
（2)在元素中，通过属性绑定的形式，将样式对象应用到元素中

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>style样式的使用</title>

</head>

<body>

    

    <div id="app">

        

        

        <div :style="{'font-size':'32px'}">{{message}}</div>

        <div :style="textStyle">{{message}}</div>

        <div :style="[textStyle,textStyle2]">{{message}}</div>

        <div :style="getStyle(2)">{{message}}</div>

    </div>

    

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

    <script>

        // 调度层

        var vm = new Vue({

            // vue控制的区域

            el: '#app',

            // data参数存放我们的数据，这一层就是mvvm里的model层

            data: {

                message: 'Hello Vue!',

                textStyle: {

                    color: 'red',

                    'font-size': '50px'

                },

                textStyle2: {

                    'font-weight': '600'

                }

            },

            methods: {

                getStyle(num) {

                    let obj = {

                        color: 'red',

                        'font-size': '50px'

                    };

                    if (num == 1) {

                        obj.color = 'red'

                    } else {

                        obj.color = 'green'

                    }

                    return obj

                }

            },

        })

    </script>

</body>

</html>

12. V-for和key属性

（1)遍历数组，参数(item,index) in list
（2)遍历对象，参数(value,key,index) in list
（3)遍历数字，num in 10 (1~10)
（4)key在使用v-for的时候都需要去设置key
1.让界面元素和数组里的每个记录进行绑定
2.key只能是字符串或者数字
3.key必须是唯一的

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>循环</title>

</head>

<body>

    

    <div id="app">

        

        <ul>

            

            

            <li v-for="(item,index) in list">{{item.name}}数组的下标{{index}}</li>

        </ul>

        <h1>迭代对象</h1>

        <ul>

            

            

            <li v-for="(value,key,index) in user">对象的键：{{key}}，对象的值：{{value}},数组的下标{{index}}</li>

        </ul>

        <h1>迭代数字</h1>

        <ul>

            

            

            <li v-for="num in 10">你好</li>

        </ul>

        <h1>v-for的key</h1>

        <button @click='add'>add</button>

        <ul>

            

            <li v-for='(item,index) in list' :key='item.id'>

                <input type="checkbox"> {{item.name}}数组的下标{{index}}

            </li>

        </ul>

    </div>

    

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

    <script>

        // 调度层

        var vm = new Vue({

            // vue控制的区域

            el: '#app',

            // data参数存放我们的数据，这一层就是mvvm里的model层

            methods: {

                add() {

                    // this.list.push({

                    //     userId: 10,

                    //     name: '新来的'

                    // })

                    this.list.unshift({

                        userId: 10,

                        name: '新来的'

                    })

                }

            },

            data: {

                message: 'Hello Vue!',

                user: {

                    userId: 19,

                    name: '测试name',

                    age: 18

                },

                list: [{

                        id: 1,

                        name: '张三1'

                    },

                    {

                        id: 2,

                        name: '张三2'

                    },

                    {

                        id: 3,

                        name: '张三3'

                    },

                    {

                        id: 4,

                        name: '张三4'

                    },

                    {

                        id: 5,

                        name: '张三5'

                    }

                ]

            }

        })

    </script>

</body>

</html>

注意：

2.2.0+ 的版本里，当在组件中使用 v-for 时，key 现在是必须的。

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用 “就地复用” 策略。如果数据项的顺序被改变，Vue将不是移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。

13. v-if与v-show区别

（1)区别：
1.v-if删除dom元素
2.v-show设置display:none
（2)应用场景：
1.v-if只修改一次的时候可以使用v-if
2.v-show频繁切换的时候可以使用v-show

示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>条件显示</title>

</head>

<body>

    

    <div id="app">

        <button @click='change'>切换</button>

        

        <p v-if='flag'>{{ message }}</p>

        

        <div v-show='flag'>{{ message }}</div>

        

        

    </div>

    

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

    <script>

        // 调度层

        var vm = new Vue({

            // vue控制的区域

            el: '#app',

            // data参数存放我们的数据，这一层就是mvvm里的model层

            data: {

                message: 'Hello Vue!',

                flag: false

            },

            methods: {

                change() {

                    this.flag = !this.flag

                }

            },

        })

    </script>

</body>

</html>