vue基础

最新推荐文章于 2024-07-25 17:51:45 发布

YanLingGe

最新推荐文章于 2024-07-25 17:51:45 发布

阅读量259

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/YanLingGe/article/details/122311816

版权

一. 什么是vue

渐进式框架（轻量级）

Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！

二.vue的优点

提高开发效率；减少不必要的DOM操作；提高渲染效率；

让程序员可以更多的时间去关注业务逻辑；

三.框架和库的区别

框架：是一套完整的解决方案；对项目的侵入性较大

库（插件）：提供某一个小功能，对项目的侵入性较小

四.Vue.js的代码结构

1.引入vue.js

2.写视图层，我们要展示的内容

3.实例化Vue()

data：存放数据
el：这个控制是哪块视图
methods：放我们的方法

<!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>
</head>
<body>
    <!-- 视图层 -->
    <div id="app">
        {{ message }}
    </div>
</body>
<!-- 1、引入vue的js，引入js之后他为我们提供了Vue类 -->
<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>
</html>

五.插值表达式

1.v-cloak

防止界面闪烁

//插值表达式
<span  v-cloak>{{msg}}</span>

2.v-text

会替换掉元素里的内容

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


 data: {
        message: 'Hello Vue!',          
}

3.v-html

会解析富文本会替换原本内容

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


data: {            
       html:'<h1>这是一个很大的标题</h1>'
}

注意：如果指令后面内容只有一个引号，寻找变量，如果两个引号，当作常量

六.v-bind，v-on

1.v-bind

界面元素属性值的绑定

括号里不加引号的都是我们data里的数据读取
如果想使用字符串需要加上引号
里面可以写表达式
里面也可以调用定义好的方法，拿到的是方法的返回值

简写：

<button v-bind:title="nihao">按钮</button>
<button :title="nihao">按钮</button>

2.v-on

进行事件的绑定，我们用的最多的是click事件绑定

简写@

<button v-on:click="click">123</button>
<button @click='click'>123</button>

七.事件修饰符

（1） .stop 阻止冒泡

（2） .prevent 阻止默认事件

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

（4） .self 只当事件在该元素本身（比如不是子元素）触发时触发回调

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

八.v-model数据双向绑定

作用：数据双向绑定

注意：绑定的是表单控件

<!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-model</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div class="app">
        <!-- 数据绑定 -->
        {{name}}----{{age}}----{{sex}}
        <!-- 双向数据绑定 -->
        <div></div>
        <input type="text" v-model="name">
        <select v-model="age">
            <option value="01">01</option>
            <option value="02">02</option>
        </select>
        <div></div>
        男<input type="radio" value="man" v-model="sex"> 女
        <input type="radio" value="women" v-model="sex">

    </div>
    <script>
        var vm = new Vue({
            el: '.app', //指定关联的元素
            data: { //存储数据
                name: 'Leechoy',
                age: '28',
                sex: '男'
            }
        });
    </script>
</body>

</html>

九.V-for和key属性

用处：

遍历数组，参数(item,index) in list
遍历对象，参数(value,key,index) in list
遍历数字，num in 10 (1~10)

key在使用v-for的时候都需要去设置key

让界面元素和数组里的每个记录进行绑定
key只能是字符串或者数字
key必须是唯一的

key的作用：提高重排效率

十.v-if与v-show区别

v-if：删除dom元素

v-show：设置display:none

应用场景：

v-if：只修改一次的时候可以使用v-if

v-show：频繁切换的时候可以使用v-show

YanLingGe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue基础

一. 什么是vue渐进式框架（轻量级）Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！二.vue的优点提高开发效率；减少不必要的DOM操作；提高渲染效率；让程序员可以更多的时间去关注业务逻辑；三.框架和库的区别框架：是一套完整的解决方案；对项目的侵入性较大库（插件）：提供某一个小功能，对项目的侵入性较小四.Vue.js的代码结构1.引入vue.js2.写视图层，我们要展示的内容3.实例化Vue()
复制链接

扫一扫