初学vue

最新推荐文章于 2023-03-05 19:49:37 发布
最新推荐文章于 2023-03-05 19:49:37 发布
阅读量194 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46500485/article/details/108931983
版权

初学vue

1.cloak

解决页面闪动问题

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // sad
        /*
         v-cloak指令的用法
         1.提供样式
         [v-cloak]{
             display:none
         }
         2.在插值表达式所在的标签中添加v-cloak指令

         背后的原理:先通过样式隐藏内容  然后在内存中进行值的替换  替换好之后再显示最终的结果
         */

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue'
            }
        });
    </script>
</body>

</html>

2.v-text、v-html、v-pre、

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-text="msg"></div>
        <div v-html="msg1"></div>
        <div v-pre>{{msg}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // sad
        /*
         v-cloak指令的用法
         1.提供样式
         [v-cloak]{
             display:none
         }
         2.在插值表达式所在的标签中添加v-cloak指令

         背后的原理:先通过样式隐藏内容  然后在内存中进行值的替换  替换好之后再显示最终的结果
         */

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue',
                msg1: "<h1>HTML</h1>"
            }
        });
    </script>
</body>

</html>

3、数据响应式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
        v-once的应用场景:如果显示的信息后续不需要再修改  
        可以使用v-once可以提高性能
         */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue',
                info: 123
            }
        });
    </script>
</body>

</html>

4、双向数据绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{msg}}</div>
        <div v-once>{{info}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
        v-once的应用场景:如果显示的信息后续不需要再修改  
        可以使用v-once可以提高性能
         */
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello Vue',
                info: 123
            }
        });
    </script>
</body>

</html>

5、事件绑定

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{num}}</div>
        <div>
            <button v-on:click="num++">点击</button>
            <button @click='num++'>点击1</button>
            <button @click='handle'>点击2</button>
            <button @click='handle()'>点击3</button>

        </div>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0,
            },
            methods: {
                handle: function() {
                    // 这里的this就是vue的实例对象
                    console.log(this == vm);
                    this.num++;
                }
            }
        })
    </script>
</body>

</html>

6、事件对象的基本使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{num}}</div>
        <div><button v-on:click="handle1">点击</button></div>
        <div><button v-on:click="handle(123,456,$event)">点击带传参</button></div>

    </div>
    <script src="../vue.js"></script>
    <!-- 

        1.如果事件直接绑定函数名称  那么默认会携带事件对象作为事件函数的第一个参数
        2.如果事件绑定调用，那么事件对象必须作为最后一个参数进行传递  显式传递  并且事件的名称必须是$event
     -->
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle: function(p, p1, event) {
                    console.log(p);
                    console.log(p1);
                    console.log(event.target.innerHTML);
                    this.num++;
                },
                handle1: function(event) {
                    console.log(event.target.innerHTML);
                    this.num++;

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

</html>

7.事件修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
    <div id="app">
        <div v-cloak>{{num}}</div>
        <div v-on:click='handle0'><button v-on:click.stop="handle1">点击</button></div>
        <a href="http://www.baidu.com" v-on:click.prevent="">阻止默认事件</a>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                num: 0
            },
            methods: {
                handle0() {
                    this.num++;
                },
                handle1: function(event) {
                    //阻止事件冒泡
                    // event.stopPropagation()
                    console.log(event.target.innerHTML);
                    this.num++;

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

</html>

8、按键修饰符

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

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

<body>
    <div id="app">
        <form action="">
            <div>
                用户名:
                <input type="text" v-on:keyup.delete="clearContent" v-model="uname">
            </div>
            <div>
                密码:
                <input type="text" v-model="pwd" v-on:keyup.enter="handleSubmit">
            </div>
            <div>
                <input type="button" v-on:click="handleSubmit" value="提交">
            </div>
        </form>
    </div>
    <script src="../vue.js"></script>
    <script>
        /* 事件绑定  按键修饰符 */
        var vm = new Vue({
            el: '#app',
            data: {
                uname: '',
                pwd: ''
            },
            methods: {
                handleSubmit() {
                    console.log(this.uname, this.pwd);
                },
                clearContent() {
                    //按delete键时 清空用户名
                    this.uname = ""
                }
            }
        })
    </script>
</body>

</html>

9、自定义按键修饰符

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

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

<body>
    <div id="app">
        <input type="text" v-on:keyup.aaa="handle" v-model="info">
    </div>
    <script src="../vue.js"></script>
    <script>
        /* 
                事件绑定 自定义按键修饰符 
                规则:自定义按键修饰符名字是自定义的  但是对应的值必须是按键对应的event.keycode值
                */
        Vue.config.keyCodes.aaa = 65
        var vm = new Vue({
            el: '#app',
            data: {
                info: ''
            },
            methods: {
                handle(event) {
                    console.log(event.keyCode);
                },
            }
        })
    </script>
</body>

</html>

10、属性绑定

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

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

<body>
    <div id="app">
        <a v-bind:href="url">百度</a>
        <a :href="url">百度1</a>

        <button v-on:click="handle">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                url: 'http://www.baidu.com'
            },
            methods: {
                handle() {
                    //修改url地址
                    this.url = "http://www.jd.com"
                }
            }
        })
    </script>
</body>

</html>

11、样式绑定

对象的形式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 1px solid #000;
            width: 100px;
            height: 100px;
        }
        
        .error {
            background-color: #f00;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="{active:isActive,error:isError}"></div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isError: false,
            },
            methods: {
                handle() {
                    this.isActive = !this.isActive
                    this.isError = !this.isError
                }
            }
        })
    </script>
</body>

</html>

数组的形式

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 1px solid #000;
            width: 100px;
            height: 100px;
        }
        
        .error {
            background-color: #f00;
            width: 100px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="[activeClass,errorClass]"></div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'error'
            },
            methods: {
                handle() {
                    this.activeClass = ''
                }
            }
        })
    </script>
</body>

</html>

混合

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            border: 1px solid #000;
            width: 100px;
            height: 100px;
        }
        
        .error {
            background-color: #f00;
            width: 100px;
            height: 100px;
        }
        
        .test {
            color: blue;
        }
        
        .base {
            font-size: 28px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div :class="[activeClass,errorClass,{test:isTest}]">测试样式</div>
        <div v-bind:class="arrClasses"></div>
        <div v-bind:class="objClasses"></div>
        <div class="base" v-bind:class="objClasses">测试样式</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
        样式绑定相关语法细节:
        1.对象绑定和数组绑定可以结合使用
        2.class绑定的值  可以简化操作
        3.默认的class如何处理  默认的class会保留
        */
        var vm = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                errorClass: 'error',
                isTest: true,
                arrClasses: ['active', 'error'],
                objClasses: {
                    active: true,
                    error: true,
                },
            },
            methods: {
                handle() {
                    // this.isTest = !this.isTest
                    this.objClasses.error = false
                }
            }
        })
    </script>
</body>

</html>

12、分支结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div v-if='score>=90'>优秀</div>
        <div v-else-if='score<90&&score>=80'>良好</div>
        <div v-else-if='score<80&&score>=60'>一般</div>
        <div v-else>差</div>
        <input type="text" v-model="score">
        <div v-show="flag">测试v-show</div>
        <button v-on:click="handle">切换</button>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
        v-show的原理   控制元素样式是否显示 display：none
        */
        var vm = new Vue({
            el: '#app',
            data: {
                score: 99,
                flag: false,
            },
            methods: {
                handle: function() {
                    this.flag = !this.flag
                }
            }
        })
    </script>
</body>

</html>

13、循环结构

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div>水果列表</div>
        <ul>
            <li v-for="item in fruits">{{item}}</li>
            <li v-for="(item,index) in fruits">{{item+'-----'+index}}</li>
            <li v-for="(item,index) in myFruits" :key="item.id">
                <span>{{item.ename}}</span>
                <span>----</span>
                <span>{{item.cname}}</span>
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
        v-show的原理   控制元素样式是否显示 display：none
        */
        var vm = new Vue({
            el: '#app',
            data: {
                fruits: ['apple', 'orange', 'banana'],
                myFruits: [{
                    id: 1,
                    ename: 'apple',
                    cname: '苹果',
                }, {
                    id: 2,
                    ename: 'orange',
                    cname: '橘子',
                }, {
                    id: 3,
                    ename: 'banana',
                    cname: '香蕉',
                }, ]
            },
            methods: {

            }
        })
    </script>
</body>

</html>

14、循环分支结合使用

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

    </style>
</head>

<body>
    <div id="app">
        <div v-if="obj.age>12" v-for="(value,key,index) in obj">{{value + '----'+key+'-----'+index}}</div>
    </div>
    <script src="../vue.js"></script>
    <script>
        // 
        /* 
         */
        var obj = {
            uname: 'list',
            age: 12,
            gender: 'male'
        }
        var vm = new Vue({
            el: '#app',
            data: {
                obj: {
                    uname: 'list',
                    age: 12,
                    gender: 'male'
                }
            },
            methods: {

            }
        })
    </script>
</body>

</html>
江呱呱
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
初学Vue
01-20
在初学Vue时，首先要理解它的基本概念和核心特性。 1. **Vue实例**： 创建Vue实例是使用Vue.js开发应用的第一步。`new Vue()` 是用来创建一个Vue实例的构造函数。在提供的代码示例中，`el`属性用于指定Vue实例所...
初学vue出现空格警告的原因及其解决方案
12-13
初学vue自己新建一个vue项目来做学习demo。不过在编写代码时一直出现空格不规范的警告。严重影响初学者的热情。错误如下图所示。（这样的错误很多，但大概翻译成中文的意思都是说空格使用不规范。） 这是因为你使用...
Vue学习记录
青春_奋斗不息
08-02 6896
Vue学习笔记，方便后续查阅。
Vue基础语法笔记
做技术，坚持才是最重要的，一时的热情只是暂时的进步
08-04 399
一、创建第一个Vue实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>vue入门</title> <script src="vue/vue.js"></script> </head> <body> <div id="root">{{msg}}</div> &lt
vue 介绍
qq_42243957的博客
08-08 96
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue入门</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <body> <div id="app"> <p>{{ message }}&l..
vue.js知识点回顾
s8459的博客
03-05 142
/ JSON是JS对象的字符串表示法，它使用文本表示一个JS对象的信息，本质是一个字符串。// JSON.stringify()方法 实现从JS对象转换为JSON字符串。// JSON.parse()方法 实现从JSON字符串转换为JS对象。4、cookie中的数据是有过期时间的,超过时间数据会被浏览器自动删除。3、cookie中的数据是以域名的形式进行区分的。-- V-show和v-if都可以用来控制标签的显示与隐藏。-- 遇到标签会解析 -->-- 遇到标签不解析，只当纯文本 -->
Vue入门实例
程裕强的专栏
12-02 322
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue入门实例</title> <script src="https://vuejs.org/js/vue.min.js"></script> </head> &lt...
初学Vue(学习笔记 一) day one
01-20
Vue.js 是一个渐进式的JavaScript框架，它设计的目标是让开发者能够轻松地构建用户界面，尤其是在Web应用开发中。Vue的核心特性包括声明式渲染、组件...对于初学者来说，逐步理解并实践这些概念是掌握Vue的关键步骤。
Vue-Koa2-MongoDB:基于Vue+Koa2+MongoDB的商城，前端UI采用有赞的Vant组件库，后端采用Koa2，数据库使用MongoDB。难度不大，主要供大家初学Vue全栈参考学习
05-08
vue-mallVue + Koa2 + MongoDB 全栈商城WebAppUI组件库 有赞出品的移动端组件库Vant，基于Vue.js说明前端就不用说了，npm run dev起服务。主要这里服务端涉及mongoDB数据库，简单说一下，因为我是Mac，用的homebrew...
html基础学习
weixin_52676304的博客
10-15 3937
html新手学习，以菜鸟教程为主
HTML基础
qq_44801321的博客
08-14 3737
W3C标准 结构化标准语言（HTML,XML）. 表现标准语言（CCS）. 行为标准语言（DOM，ECMAscript） HTML基本结构 <body> <-body>等成对的标签分别叫做开放标签和闭合标签 单独出现的叫自闭合标签 <!--DOCTYPE用来定义标准--> <!DOCTYPE html> <html lang="en"> <!--head标签代表网页的头部--> <head> <!--meta描述
!DOCTYPE html 的作用
态度决定一切
06-04 1万+
1.定义：DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器； 2.作用： 声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。 document.compatMode： BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面。 CSS1Compat：标准模式，浏览器使用W3C的标准解析渲染页面。 ...
Vue输出HTML
BADAO_LIUMANG_QIZHI的博客
09-13 1441
&lt;!doctype html&gt; &lt;html lang="en"&gt;  &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;meta name="Generator" content="EditPlus®"&gt;   &lt;meta name="Author&
Vue中解析html标签
热门推荐
光头强的博客
01-19 6万+
vue中不解析html标签，会把html标签给正常输出，vue中提供了v-html来解决这一问题 正常情况下输出： &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &
快速上手Vue（适合懂基础html、css和js的人）
qq20004604的博客
02-08 2万+
快速上手Vue前述1. 目标是通过本文，快速了解Vue的基本原理和使用它进行简单的开发 2. 只需要html、css、js基础即可（原理涉及ES5，ES6，但对开发者来说不是必须要学的） 3. 这是根据我内部分享的PPT改写的 目录1. 概述 2. 原理 3. 快速上手 4. 其他Vue常见功能 5. 使用Vue写一个大型页面 1、概述Vue的优点： 轻量——最小只需要17.14kb（Vue.js
html头部中各式各样的meta
weixin_30668887的博客
06-05 218
在写网页的过程中，第一步就是创建一个html文档。如下是最简单的 html5 文档。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="wid...
html标题的使用
weixin_63607527的博客
03-08 289
<!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>王薪.
初学vue案例练习题
最新发布
08-23
初学Vue的案例练习题可以从以下几个方面进行练习： 1. 组件的基本使用：创建一个Vue组件，在模板中展示一些静态文本或数据，并在组件中定义一些基本的数据和方法。 2. 数据绑定：练习使用v-model指令和数据绑定来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值