Vue复习(一)

Vue 复习(一)

Vue 复习(一)

Vue.js 不支持 IE8及以下版本

1. 安装

1.1 直接下载源码然后通过相对路径引入

开发版本 https://vuejs.org/js/vue.js
生产版本 https://vuejs.org/js/vue.min.js

1.2 CDN

1.3 使用npm下载

npm init -y
npm i vue

2. Hello world

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        new Vue({
            el:"#app",
            data () {
                return {
                    msg:"Hello World"
                }
            }    
        })
    </script>
</body>
</html>

3. Vue实例的选项(基础)

3.1 el

作用:当前Vue实例所管理的html视图
值:通常是id选择器(或者是一个 HTMLElement 实例)
不要让el所管理的视图是html或者body

3.2 data

Vue 实例的数据对象，是响应式数据(数据驱动视图)
可以通过 vm.$data 访问原始数据对象
Vue 实例也代理了 data 对象上所有的属性，因此访问 vm.a 等价于访问 vm.$data.a
视图中绑定的数据必须显式的初始化到 data 中

3.3 methods

其值为可以一个对象
可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。
方法中的 this 自动绑定为 Vue 实例。
注意，不应该使用箭头函数来定义 method 函数 (例如 plus: () => this.a++)。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.a 将是 undefined

3.4 代码演示

<div id="a">
    {{msgA}} -- {{fn1()}}
</div>

<script src="./vue.js"></script>
<script>
    const vm = new Vue({
        // el作用:指定当前Vue实例所管理的视图,值通常是id选择器
        // 1. el的值可以是css选择器,通常是id选择器
        // 2. el的值不能是html标签和body标签

        el: '#a',
        // data作用:指定当前Vue实例的数据对象
        // 1. data中的数据是响应式数据
        // 2. 值可以是一个对象 {属性: 值}
        // 3. 所有数据部分写在data中
        // 4. 在当前Vue实例所管理的视图中通过属性名使用data中的数据
        // 5. 可以通过vm.$data.属性 访问数据
        // 6. 可以通过vm.属性 访问数据(更简单)
        data: {
            msgA: '第一个Vue实例对象'
        },
        // methods作用:指定当前Vue实例中的方法
        // 1. 可以直接通过vm实例访问这些方法，
        // 2. 方法中的 this 自动绑定为 Vue 实例。
        // 3. 不推荐使用箭头函数
        methods: {
            fn1: function() {
                console.log(this.msgA);
                console.log('vm实例中的methods里的fn1方法被调用');
            },
            fn2: function() {
                this.fn1();
                console.log('fn2方法被调用--');
            },
            fn3: () => {
                console.log(this);
            }
        }
    });
    // 调用fn2方法
    vm.fn2();
    // 调用fn3方法
    vm.fn3();
</script>

4. Vue.js术语

`插值表达式`

作用:会将绑定的数据实时的显示出来:

通过任何方式修改所绑定的数据,所显示的数据都会被实时替换

{{js表达式、三目运算符、方法调用等}}

不能写 var a = 10; 分支语句循环语句

    <div id="app">
        <!-- 在插值表达式中可以访问vm实例中data里面的属性 -->
        {{message}}
        <p>{{message}}</p>
        <p>{{message+'啦啦啦'}}</p>
        <p>{{age>18?'成年':'未成年'}}</p>
        <p>{{message.split("")}}</p>
        <!-- 在插值表达式中不能写js语句 -->
        <p>{{var a = 10}}</p>
    </div>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            }
        });
    </script>

插值表达式中不能写js语句, 如var a = 10;

`指令`

指令 (Directives) 是带有 v- 前缀的特殊特性。

指令特性的值预期是单个 JavaScript 表达式(v-for 是例外情况，稍后我们再讨论)。

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

Vue框架提供的语法

扩展了HTML的能力

减少DOM操作

  <div id="app">
        <p> {{message}}</p>
        <!-- v-on就是vue给标签元素提供的扩展-指令
            v-on指令就是给标签绑定事件,这里是click,
            当事件处于点击状态时,出发methods中的changeMsg方法
        -->
        <button v-on:click="changeMsg">按钮</button>
    </div>
    <!-- 引入vue.js -->
    <script src="./vue.js"></script>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                message: '我是data中的message属性的值',
                age: 20
            },
            methods: {
                changeMsg: function() {
                    this.message += "啦";
                }
            }
        });
    </script>

5. Vue常用命令

扩展了html标签的功能、大部分的指令的值是js的表达式，取代DOM操作，这里介绍常用的几个，具体请看Vue.js官方文档 https://cn.vuejs.org/v2/guide/

5.1 v-text 和v-html

v-text:更新标签中的内容
- v-text和插值表达式的区别
  - v-text 更新整个标签中的内容
  - 插值表达式: 更新标签中局部的内容
v-html:更新标签中的内容/标签
- 可以渲染内容中的HTML标签
- 注意:尽量避免使用，容易造成危险 (XSS跨站脚本攻击)

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 替换标签的全部内容 -->
        <p v-text="msg">我是P标签的全部内容</p>
        <p v-text="msg">{{count}}</p>
        <p>{{msg}}</p>
        <br>
        <p v-text="str"></p>
        <!-- v-html 可以识别字符串标签 -->
        <p v-html="str"></p>
        <p v-html="stralert"></p>

    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    msg: 'abc',
                    count: 100,
                    str:'<span>span标签</span>',
                    stralert:'<span onclick="alert(1)">span标签</span>'
                }
            },
            methods: {

            }
        })
    
    </script>
</body>
</html>

5.2 v-if 和v-show

作用:根据表达式的bool值进行判断是否渲染该元素,

v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。

因此，如果需要非常频繁地切换，则使用 v-show 较好；

如果在运行时条件很少改变，则使用 v-if 较好。

 <div id="app">
        <!-- 如果isShow的值是true ,就显示p标签 -->
        <p v-if="isShow">我是p标签中的内容</p>
        <p v-show="isShow">我是p标签中的内容</p>
        <!-- 如果标签显示与隐藏切换频繁, 就使用v-show 
            v-show本质是通过修改标签的display值
        -->
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                isShow: false
            }
        });
    </script>

5.3 v-on

简写: @事件名.修饰符 = 'methods中的方法名'

作用:使用 v-on 指令绑定 DOM 事件，并在事件被触发时执行一些 JavaScript 代码。
语法: @事件名.修饰符 = "methods中的方法名"

注意: $event 可以传形参

 <div id="app">
        <!-- v-on.xx事件名='当触发xx事件时执行的语句' -->
        <!-- 执行一段js语句:可以使用data中的属性 -->
        <button v-on:click="count += 1">增加 1</button>
        <!-- v-on的简写方法 -->
        <button @click="count += 1">增加 1</button>
        <!-- 执行一个方法 -->
        <button @click="add">增加 1</button>
        <!-- 执行一个方法、这种写法可以传形参 -->
        <button @click="fn1(count)">执行fn1方法</button>
        <!-- 执行一个方法、这种写法可以传形参,特殊的形参$event -->
        <button @click="fn2($event)">执行fn2方法</button>
        <hr>
        <!-- 和v-for结合使用 -->
        <button @click="fn3(index)" v-for="(item, index) in items">执行fn3方法</button>
        <!-- v-on修饰符 如 once: 只执行一次 -->
        <button @click.once="fn4">只执行一次</button>

        <p>上面的按钮被点击了 {{ count }} 次。</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0,
                items: ['a', 'b', 'c']
            },
            methods: {
                add: function() {
                    this.count += 1;
                },
                fn1: function(count) {
                    console.log(count);
                    console.log('fn1方法被执行');
                },
                fn2: function(e) {
                    console.log(e);
                    console.log('fn2方法被执行');
                },
                fn3: function(index) {
                    console.log(index);
                    console.log('fn3方法被执行');
                },
                fn4: function() {
                    console.log('fn4方法被执行了');
                }
            }
        });
    </script>

修饰符
- .once - 只触发一次回调。
- .prevent - 调用 event.preventDefault()。

posted @ 2020-04-28 16:43 乾子阅读(204) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 2025成都.NET开发者Connect圆满结束
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 用一种新的分类方法梳理设计模式的脉络

公告

昵称：乾子
园龄： 5年7个月
粉丝： 15
关注： 32

+加关注

2025年3月

日

一

二

三

四

五

六

乾子大大

愿所得皆所期，所失皆无碍