vue2全集

最新推荐文章于 2023-09-11 16:57:48 发布

ＸｉａｏＷａｎｇ

最新推荐文章于 2023-09-11 16:57:48 发布

阅读量191

点赞数 1

分类专栏：前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_41220805/article/details/123047510

版权

开始

在页面上显示Hello Vue!

下载vue，编写以下代码

<!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.js"></script>
    </head>
    <body>
        <!-- 创建一个容器 -->
        <div id="root">
            <h1>Hello {
  {name}}!</h1>
        </div>

        <script>
            //创建vue实例
            new Vue({
     
                el: '#root', //指定元素
                //指定数据
                data: {
     
                    name: 'Vue'
                }
            })
        </script>
    </body>
</html>

运行结果：

在vue中一个vue实例只能绑定一个容器，一个容器也只能与一个vue实例相对应

{ {}}中不但可以写data中的数据，还可以写js的表达式，如{ {Data.now()}}

Vue核心

指令

数据绑定（v-bind:与v-model:）

基本使用

用于标签属性的绑定

<!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>数据绑定</title>
        <script src="../vue.js"></script>
    </head>
    <body>
        <div id="app">
            单项数据绑定： <input type="text" :value="name">
            <hr>
            双向数据绑定： <input type="text" v-model="name">
        </div>
        <script>
            new Vue({
     
                el: '#app',
                data: {
     
                    name: 'Vue'
                }
            })
        </script>
    </body>
</html>

v-bind:实现单向数据绑定，将data中的数据绑定到元素上，可简写成:。v-model:实现双向数据绑定。v-model:一般用于表单类元素(输入类元素)，默认绑定的是value属性，所以绑定属性是value时可简写成v-model:

v-model的修饰符：lazy：失去焦点在进行数据的同步、number将收集的数据传承number类型、trim：过滤首尾的空格

表单中数据的处理

示例：制作以下页面，将页面中的数据与vue中的数据进行绑定

<div id="app">
    <form>
        <label>
            账号 <input type="text" v-model.trim="user.account">
        </label>
        <br>
        <label>
            密码 <input type="password" v-model="user.password">
        </label>
        <br>
        性别: 男 <input type="radio" v-model="user.gender" value="male" name="gender"> 女 <input type="radio" v-model="user.gender" value="female" name="gender">
        <br>
        爱好： 抽烟<input type="checkbox" name="hobby" v-model="user.hobby" value="抽烟"> 喝酒<input type="checkbox" name="hobby" v-model="user.hobby" value="喝酒"> 烫头<input type="checkbox" name="hobby" v-model="user.hobby" value="烫头">
        <br>
        年龄： <input v-model.number="user.age" type="number">
        <br>
        所属校区:
        <select v-model="user.school">
            <option value="上海">上海</option>
            <option value="北京">北京</option>
            <option value="天津">天津</option>
            <option value="南京">南京</option>
        </select>
        <br>
        其他信息： <textarea v-model.lazy="user.other"></textarea>
        <br>
        <input type="checkbox" v-model="user.agree"> 阅读并接受用户协议
    </form>
</div>
<script>
    new Vue({
     
        el: '#app',
        data: {
     
            user: {
     
                account: '',
                password: '',
                gender: '',
                hobby: [],
                age: NaN,
                school: '',
                other: '',
                agree: false
            }
        },
    })
</script>

总结

若:<input type=“text” />，则v-model收集的是value值，用户输入的就是value值。
若: <input type=“radio”/>, 则v-model收集的是value值，且要给标签配置value值。
若: <input type=“checkbox”/>
1. 没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)
2. 配置input的value届性:
  - v-model的初始值是非数组，那么收集的就是checked. (勾选or未勾选，是布尔值)
  - v-model的初始值是数组，那么收集的的就是value组成的数组

事件处理（v-on）

事件处理

v-on:xxx=“fun”
@xxx=“fun”
@xxx="fun(参数)”

默认事件的形参是event，也可以指定参数，但是指定参数之后需要传入$event，否则函数无法获取event对象。事件处理的函数如果很简单，可以在标签内部写,例：@click=“a = 2”

示例：按下按钮一，打印按钮一元素对象。按下按钮二，打印传入的参数和元素对象

<!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.js"></script>
</head>
<body>
    <div id="app">
        <button @click='fun1'>按钮一</button>
        <button @click='fun2("按钮二", $event)'>按钮二</button>
    </div>
    
    <script>
        //创建vue实例
        new Vue({
     
            el: '#app', //指定元素
            //指定数据
            data: {
     
            },
            methods: {
     
                fun1(e){
     
                    console.log(e.target)
                },
                fun2(a, e){
     
                    console.log(a, e.target)
                }
            }
        })
    </script>
</body>
</html>

依次按下按钮一二，结果如图所示

事件修饰符

用于修饰事件，达到一定效果（如阻止默认行为，阻止事件冒泡等）,多个修饰符可以连着写（链式调用）

修饰符
prevent	阻止默认事件（常用）
stop	阻止事件冒泡（常用）
once	事件只触发一次（常用）
capture	使用事件的捕获模式
self	只有event.target是自己时才触发事件
passive	事件的默认行为立即执行，无需等待事件回调执行完毕

prevent

<div id="app">
    <a href="https://www.baidu.com" @click.prevent='a'>点我去百度</a>
</div>

<script>
    //创建vue实例
    new Vue({
       
        el: '#app', //指定元素
        //指定数据
        data: {
       
        },
        methods: {
       
            a(e){
       
                alert('点击了a标签');
            }
        }
    })
</script>

使用了prevent阻止了a标签的默认行为，点击a标签不会跳转到百度

stop

事件冒泡：如有两个div，div1包含div2，两个标签都设定了点击事件，如果点击div2那么div2和div1的点击事件都会执行，这就是事件冒泡。事件冒泡分为捕获阶段和执行阶段，捕获从外向内，即从div1->div2，执行从内向外：div2->div1，所以先执行div2的事件，之后执行div1的事件。

阻止事件冒泡就是点击div2只执行div2的事件。这里需要加在div2上
once

使用之后，该事件只会执行一次
capture

事件在事件的捕获阶段就开始执行。两个div:div>div2，点击div2，则会先执行div1的事件，再执行div2的事件。因为事件捕获是由外向内的。这里需要设置的是div1
self

两个div:div1>div2，设置div1的self，则点击div2事件不会冒泡到div上去。因为event.target是div2
passive

如滚动滚轮事件wheel，需要先执行事件，再发生滚动条滚动。而添加了passive之后会先滚动滚动条，再执行事件。

键盘事件

需求：在文本框内输入字符，按下回车键，打印文本框内的字符到控制台

<div id="app">
    <input type="text" placeholder="按下回车键输出" @keyup.enter="up">
</div>

<script>
    //创建vue实例
    new Vue({
     
        el: '#app', //指定元素
        //指定数据
        data: {
     },
        methods: {
     
            up(event) {
     
                console.log(event.target.value);
            }
        }
    })
</script>

vue给常用的案件起了别名，不需要通过在事件执行的方法内判断是按了哪个按键。
1. 回车：enter
2. 删除(退格键或删除键)：delete
3. 退出：esc
4. 空格：space
5. 换行：tab 注意：tab键会改变元素焦点，所以上面的案例需要用keydown进行捕获
6. 上：up
7. 下：down
8. 左：left
9. 右：right
vue未提供别名的按键可以用按键原始的key值去绑定，但要注意转变为短横线命名。如上键的key是ArrowUp，需要转换成arrow-up
系统修饰键（用法特殊）：ctrl alt shift meta(windows键)

配合keyup使用：按下修饰键后，再按下其他键，随后释放其他键，时间才被触发

配合keydown使用：正常触发事件
也可以使用keycode去指定具体的按键（不推荐）
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名

v-text

向所在的节点中渲染文本内容

与插值语法{ {}}的区别：v-text会替换掉节点中的内容，{ {xx}}不会

v-html

v-html与v-text的区别是将文本作为html标签取解析，可能会存在安全问题

永远不要在用户输入的地方使用v-html

v-cloak

Vue在初始化阶段就会去掉这个属性。

用于加在标签上，并设置css:[v-clock]{dispaly: none},即拥有该属性的标签都不显示在页面上，从而保证在Vue还没完成加载的阶段页面上不会显示未经Vue解析的原始表达式。

v-once

示例：在页面上显示i的初始值和i的当前值，页面上有个给i累加的按钮

<div id="app">
    <h2 v-once>初始的值： {
  {i}}</h2>
    <h2>当前的值： {
  {i}}</h2>
    <button @click="i++">加1</button>
</div>

<script>
    //创建vue实例
    new Vue({
     
        el: '#app', //指定元素
        //指定数据
        data: {
     
          i: 0
        }
    })
</script>

v-once所在的节点在初次动态渲染后就被视为静态内容了。

以后数据的改变不会引起v-once所在结构的更新，可以用于性能优化。

v-pre

加上该指令的节点不进行解析，加快Vue解析的速度。

如<p>你好</p>

自定义指令

函数式

函数式是对象式的简写

示例：自定义指令v-big，该指令的作用是将绑定的元素中的（数字）*10.例：v-big=“6”,则在页面上渲染的是60

<div id="app">
    <p v-big="n"></p>
</div>
<script>
    new Vue({
     
        el: '#app',
        data:<

最低0.47元/天解锁文章

ＸｉａｏＷａｎｇ

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2全集

开始在页面上显示Hello Vue!下载vue，编写以下代码<!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-w
复制链接

扫一扫