了解vue

最新推荐文章于 2023-12-14 09:47:49 发布
最新推荐文章于 2023-12-14 09:47:49 发布
阅读量148 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luoluo_JS/article/details/105115772
版权

了解vue

1、vue关注的是视图，那么开发者只需要将你的精力集中在数据上面。因为vue是通过数据进行驱动的。（自己写一个小型vue）
2、vue和JS不是完全互通。
3、vue的特征：双向绑定，虚拟DOM
4、vue当中：指令，过滤器，计算属性，侦听器，组件等
5、当数据发生变化时，挂载的元素会被重置

如何使用vue

1、vue引入
2、创建vue实例,new vue({})
3、通过 el 属性指定vue所要挂载的元素

 new Vue({
        el:"div",// 指定要挂载的元素。 指定ID,class,标签名，DOM元素。不允许挂载到html 和body
        data:{// 用于存储实例当中的数据
            num:1// 定义了一个名字为num的数据
        }
    })

vue的注意事项

1,当多个实例指定同一个元素时，以第一次出现为主

<div id="root">
    {{num}}{{age}}
</div>
new Vue({
    el:"#root",
    data:{
        num:1,
        age:2
    }
})
new Vue({
    el:"#root",
    data:{
        num:2
    }
})

2,一个实例挂载的元素有多个,只能挂载到第一个满足条件的元素上

<div class="root">{{num}}</div>
<div class="root">{{num}}</div>
new Vue({
        el:".root",
        data:{
            num:1
        }
})

{{}}中可以写 1、输出内容 2、可以写表达式

<div id="root">
    {{userName}} | {{sex===1?"男":"女"}} | {{str.split("").reverse().join("")}}
</div>
new Vue({
        el:"#root",
        data:{
            userName:"xiaozhao",
            sex:1,
            str:"我爱你中国，我亲爱的母亲"
        }
})

一个页面多个vue实例

同一个页面可以出现多个VUE实例。el需要指定不同的元素。
指定的元素不可以是其它vue指定元素所包含的元素。

<div id="root">
    {{str}}
</div>
<div id="wrap">
    {{str}}
</div>
new Vue({
    el:"#root",
    data:{
        str:"root"
    }
})
new Vue({
    el:"#wrap",
    data:{
        str:"wrap"
    }
})

指令

是以v-开头，对元素属性的扩展。分为内置指令和自定义的指令。

v-model:用于将数据与表单元素进行绑定

<div id="root">
    <input type="text" v-model="num">
    {{num}}
    <p>{{num}}</p>
</div>
new Vue({
    el:"#root",
    data:{
        num:1
     }
})

v-if:值是一个布尔。为true渲染，否则不渲染

<div id="root">
    <input type="text" v-model.number="sex">
    <div v-if="sex===1">男</div>
    <div v-if="sex===2">女</div>
</div>
new Vue({
    el:"#root",
    data:{
        sex:1
    }
})

v-if v-else

v-else-if:值是一个布尔值，需要与v-if结合使用。true渲染，否则不渲染
v-else:需要与v-if或v-else-if结合使用。当上面的条件不满足时，会渲染该指令所在的元素

<div id="root">
    <div v-if="isLogin">欢迎xxx的到来</div>
    <div v-else>请登陆先</div>

    <input type="text" v-model.number="sex">
    <div v-if="sex===1">男</div>
    <div v-else-if="sex===2">女</div>
    <div v-else>未知</div>
</div>
new Vue({
    el:"#root",
    data:{
        isLogin:true,
        sex:1
    }
})

v-show:用于实现显示与隐藏。通过更改display样式来实现的

<div id="root">
    <div v-show="num===1">您现在学习的是v-show指令</div>
</div>
new Vue({
    el:"#root",
    data:{
        num:2
    }
})

v-bind:是用于将属性与数据进行绑定的。它的简写（冒号） ：

<div id="root">
    <img src="https://www.baidu.com/img/bd_logo1.png" alt="">
    <img :src="'https://www.baidu.com/img/bd_logo1.png'" alt="">
    <p>{{imgSrc}}</p>
    <img v-bind:src="imgSrc"alt="">
    <img :src="imgSrc"alt="">
</div>
new Vue({
    el:"#root",
    data:{
        imgSrc:"https://www.baidu.com/img/bd_logo1.png"
     }
})

v-for:可以实现遍历：数组，对象，数字，字符串

<div id="root">
1,遍历数组
<div v-for="item in arr">{{item}}</div>
<div v-for="(value,index) in arr">{{value}}|{{index}}</div>
2,遍历对象
<div v-for="item in obj">{{item}}</div>//item指value
<div v-for="(value,key) in obj">{{value}}|{{key}}</div>
3,遍历数字(从1开始)
<div v-for="item in pageSum">{{item}}</div>
<div v-for="(a,b) in pageSum">{{a}}|{{b}}</div>//a是item,b是index
4,遍历字符串
<div v-for="item in str">{{item}}</div>
<div v-for="(a,b) in str">{{a}}|{{b}}</div>//a是item,b是index
</div>
new Vue({
    el:"#root",
    data:{
        arr:[1,2,3,4,8,9],
        obj:{
            userName:"laotie",
            age:12
        },
        pageSum:12,
        str:"我确定你就是那只匹着羊皮的狼"
    }
})

v-for补充

<div id="root">
    <div v-for="item in bookList">
        <p>{{item.author}}:{{item.bookName}}</p>
    </div>
</div>
new Vue({
    el:"#root",
    data:{
        bookList:[
            {
                author:"唐家三少",
                bookName:"斗罗大陆"
            },
            {
                author:"猫腻",
                bookName:"庆余年，将夜"
            }
        ]
    }
})

v-on:指定事件。事件的值可以是一个函数，也可以是一条多条JS语句。简写 @

<div id="root">
    <input type="button" value="显示与隐藏" @click="isShow=!isShow">
    <div v-show="isShow" style="width:200px;height:300px;background:red;">
        莫欺少年穷！
    </div>
</div>
new Vue({
    el:"#root",
    data:{
        isShow:true
    }
})

<div id="root">
    <input type="button" value="加1" v-on:click="num++">
    <input type="button" value="加2" v-on:click="num+=2">
    <input type="button" value="加3" v-on:click="function(){num+=3}">
    <input type="button" value="加4" v-on:click="()=>{num+=4}">
    <input type="button" value="加5" v-on:click="addFive">
    <input type="button" value="加" v-on:click="add(6)">
    <input type="button" value="加" v-on:click="alert(100)">

    <h3>{{num}}</h3>
</div>
new Vue({
    el:"#root",
    data:{
        num:0
    },
    methods:{
        alert(n){
            alert(n);
        },
        add(n){
            this.num += n;
        },
        addFive(){
            this.num += 5;
            console.log("执行了addFive")
        }
    }
})

v-html v-text {{}}

v-html:可以让你的浏览器识别HTML标签,会覆盖标签内原有内容。当你要在指定的元素内支持HTML
v-text:以文本的形式输出，会覆盖标签内原有内容。指定元素内的内容。
{{}}：只是输出。：当你只是在元素内的某个位置输出。

<div id="root">
    <input type="text" v-model="str">
    <div>龙{{str}}虫</div>
    <div v-html="str">ASDFASDFASDF</div>
    <div v-text="str">DAFASFASDFASDF</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"你今天学习了吗？"
        },
        methods:{
            // 指定方法
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>

v-once v-pre

v-once: 数据只会在初始渲染时响应。（只会响应一次）
v-pre: 指定的区域不会受到数据的影响。

<div id="root">
    <input type="text" v-model="str">
    <div>{{str}}</div>
    <div v-once>{{str}}</div>
    <div v-pre>121212{{str}}12121222</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            // 指定你的数据属性
            str:"你们现在还好吗？"
        },
        methods:{
            // 指定方法
        },
        mounted(){
            // 当你的实例在页面当中挂载完毕之后会执行。
        }
    })
</script>

style

<body>
<div id="root">
    <p style="color:yellow;background:red;">你现在好吗？心情快乐吗?</p>
    <p :style="abc">你现在好吗？心情快乐吗?</p>
    <p :style="fn()">你现在好吗？心情快乐吗?</p>
    <p :style="'color:yellow;background:red;'">你现在好吗？心情快乐吗?</p>
    <p :style="{background:'green',color:'blue'}">你现在好吗？心情快乐吗?</p>
    <p :style="[{background:'green'},{color:'blue'}]">你现在好吗？心情快乐吗?</p>
    <p :style="[co,bg]">你现在好吗？心情快乐吗?</p>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            co:{color:'orange'},
            bg:{background:'blue'},
            abc:"color:green;background:gold;"
        },
        methods:{
            fn(){
                return "color:green;background:gold;"
            }
        }
    })
</script>

class

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .co{
           color:greenyellow;
        }
        .bg{
            background:lightskyblue;
        }
        .abc {
            background:green;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
   <p class="bg co">又成同学啦，好久不见呀</p>   //有class co,bg的样式
   <p :class="'bg co'">又成同学啦，好久不见呀！</p>  //有class co,bg的样式
   <p :class="abc">又成同学啦，好久不见呀！</p>  //没有样式的.data中没有abc属性名
   <p :class="['bg','co']">又成同学啦，好久不见呀！</p> //有class co,bg的样式
   <p :class="[bg,'co']">又成同学啦，好久不见呀！111111</p> //有co的样式
   <p :class="{bg:true}">最后一个</p> //有 class bg的样式
   <p :class="myBg">走一下</p> //有 class abc的样式
   <p :class="1===2?myBg:myAbc">走一下</p>  //有class co,bg的样式
   <p :class="{abc:true}">走一下</p> //有 class abc的样式
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            myAbc:"bg co",
            myBg:"abc"
        }
    })
</script>

v-model修饰符

.number:将数据转为number类型
.trim:去除左右两侧的空格
.lazy:当失去焦点时，数据才会受到影响。

<body>
<div id="root">
<input type="text" v-model.number="a">+
<input type="text" v-model.number="b">{{a+b}}
<input type="text" v-model.trim="str">
<p>青龙{{str}}白虎</p>
<input type="text" v-model.lazy="userName">
<p>{{userName}}</p>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            a:0,
            b:0,
            str:"廖志浩",
            userName:"许家量"
        }
    })
</script>

用多种方式进行tab切换

1,原生js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <input type="button" value="财经">
    <div>娱乐新闻</div>
    <div>体育新闻</div>
    <div>财经新闻</div>
</div>
</body>
<script>
    const btns = document.querySelectorAll("#root input");
    const myDiv = document.querySelectorAll("#root div");
    let index = 2;

    for(let i=0;i<btns.length;i++){
        myDiv[i].style.display = "none";
        btns[i].onclick = function () {
            hide();
            index = i;
            show();
        }
    }
    show();
    function hide() {
        btns[index].className = null;
        myDiv[index].style.display = "none";
    }
    function show(){
        btns[index].className = "active";
        myDiv[index].style.display = "block";
    }
</script>
</html>

2,面向对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
</head>
<body>
<div id="root">
    <input type="button" value="娱乐">
    <input type="button" value="体育">
    <input type="button" value="财经">
    <div>娱乐新闻</div>
    <div>体育新闻</div>
    <div>财经新闻</div>
</div>
</body>
<script>
    //  面向对过程---》面向对象：将之前的变量作为对象的属性，将之前的函数，作为对象的方法
    function Tag() {
        this.btns = document.querySelectorAll("#root input");
        this.myDiv = document.querySelectorAll("#root div");
        this.index = 2;
        this.init = function () {
            for(let i=0;i<this.btns.length;i++){
                this.myDiv[i].style.display = "none";
                this.btns[i].onclick =  () => {
                    console.log(1111111111,this);
                    this.hide();
                    this.index = i;
                    this.show();
                }
            }
            this.show();
        }
        this.show = function () {
            this.btns[this.index].className = "active";
            this.myDiv[this.index].style.display = "block";
        }
        this.hide = function () {
            this.btns[this.index].className = null;
            this.myDiv[this.index].style.display = "none";
        }
    }
    const tag = new Tag();
    tag.init();
</script>
</html>

3,vue方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:200px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input :class="{active:index===0}" type="button" @click="index=0" value="娱乐">
    <input :class="{active:index===1}" type="button" @click="index=1" value="体育">
    <input :class="{active:index===2}" type="button" @click="index=2" value="财经">
    <div v-show="index===0">娱乐新闻</div>
    <div v-show="index===1">体育新闻</div>
    <div v-show="index===2">财经新闻</div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 用于决定当前选中项。
        }
    })
</script>
</html>

4,豪华版切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:600px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="button"
           :class="{active:index===i}"
           v-for="(item,i) in newsList"
           @click="index=i"
           :value="item.type"/>
    <div v-show="index===i" v-for="(item,i) in newsList">
        <p v-for="info in item.arr">
            <a :href="info.newsHref">{{info.newsTitle}}</a>
        </p>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 选 中项
            newsList:[
                {
                    type:"娱乐",
                    arr:[
                        {
                            newsTitle:"许绍洋与交往7年女友分手，43岁的他黯然搬离昔日爱巢",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
                        },
                        {
                            newsTitle:"许绍洋与交往7年女友分手，43岁的他黯然搬离昔日爱巢2222",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A01CN300.html"
                        }
                    ]
                },{
                    type:"体育",
                    arr:[
                        {
                            newsTitle:"中国职业足坛首例！中甲梅州巴西球员确诊新冠",
                            newsHref:"http://sports.qq.com/a/20200318/018486.htm"
                        },
                        {
                            newsTitle:"中国职业足坛首例！中甲梅州巴西球员确诊新冠222222",
                            newsHref:"http://sports.qq.com/a/20200318/018486.htm"
                        }
                    ]
                },{
                    type:"财经",
                    arr:[
                        {
                            newsTitle:"一个留观酒店经理的记“疫”：这一次，希望酒店空荡荡",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
                        },
                        {
                            newsTitle:"一个留观酒店经理的记“疫”：这一次，希望酒店空荡荡22222",
                            newsHref:"https://new.qq.com/omn/20200318/20200318A0E7ZX00.html"
                        }
                    ]
                }
            ]
        }
    })
</script>
</html>

5,豪华增强版切换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #root input{
            padding:5px;
            margin:5px;
        }
        #root input.active{
            background:red;
        }
        #root div{
            width:600px;
            height:200px;
            background:yellow;
        }
    </style>
    <script src="lib/vue.js"></script>
</head>
<body>
<div id="root">
    <input type="button"
           :class="{active:index===i}"
           v-for="(item,i) in newsList"
           @click="index=i"
           :value="item.type"/>
    <div v-show="index===i" v-for="(item,i) in newsList">
        <p v-for="info in item.arr">
            <a :href="info.newsHref">{{info.newsTitle}}</a>
        </p>
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#root",
        data:{
            index:0,// 选中项
            newsList:[]
        },
        // vue 生命周期。
        mounted(){
            // 当刷新页面以后，并生成VUE实例以后，会执行该函数。
            // 当页面挂载完毕以后会执行该函数。钩子函数
            const xhr = new XMLHttpRequest();
            xhr.open("get","data.json"); //data.json中有如4中的newList中的形式差不多的但是是json数据的数据
            xhr.send();
            xhr.onload = () => {
                this.newsList = JSON.parse(xhr.responseText)
            }
        }
    })
</script>
</html>
luoluo_JS
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
新手简单了解vue
12-07
前言 作为一个刚入行不久的菜鸟不知从什么时候开始就有了写一个自己的专栏的想法，刚好今天没事就给自己挖一个坑，分享一下我对vue的见解和一些领悟，整个专栏应该会包括vue，vue-cli，vue-router，vuex，nuxt和一些webpack的简单入门，当然实战项目也一定会放出来，更新频率视手头的项目进度而定，话不多说，开始今天的第一篇专栏。 vue是什么？为什么我们要使用vue？ 说到了vue，我们就不得不先聊一下vue是什么以及为什么我们要使用vue，他能给我们的开发带来什么样的便利呢？ 首先，我们来看一下vue的自我介绍： Vue (读音 /vjuː/，类似于 view) 是一套
了解Vue
chu_geng的博客
09-27 146
vue MVVM框架 渐进式框架  框架   vue     有一定的规范规，定一些功能放置的位置，主动权在框架手里，开发者安装框架规定的地方，写代码，框架主动调用代码。 库  （jq undescore  lodash）     主动权在开发者手中，库只提供一堆的函数（API）开发者主动调用API完成功能，取决于开发者组织代码 俩个核心点     1、响应式的数据定义      ...
认识并了解Vue
zwb的博客
09-28 2952
Vue 1.概念 vue是一套用于构建用户界面的渐进式框架，发布于2014年2月。与其他大型框架不同的是，vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层。 Soc：关注度分离原则 HTML+CSS+JS：视图：给用户看，刷新后台给的数据 支持MVVM， 网络通信：axios 页面跳转：vue-router 2.前端知识体系 2.1前端三要素 HTML（结构）：超文本标记语言（Hyper Text Markup Language）,决定网页的结构和内容 CSS（表现）：层叠样式表（Casca
深入了解Vue
Abdullahi_kanye的博客
04-03 286
一、vue的组件 组件的概念; 组件(component)是vue的功能之一。可以扩展HTML元素，封装可重用的代码。它是自定义的元素，vue可以为它添加特殊功能。总之，组件是用来完成特定功能的一个自定义的HTML标签。 组件的作用 对特定功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码. 组件的分类： 全局组件和局部组件。 在浅学vue的那一篇博客中已经详细...
初步了解VUE
zhufan2333的博客
01-03 525
VUE中文官网：https://cn.vuejs.org/VUE安装教程：https://cn.vuejs.org/v2/guide/installation.html 注：Vue.js 支持所有兼容 ECMAScript 5 的浏览器（Vue.js 不支持 IE8 及其以下版本）。初步了解VUE模板语法每个 Vue 应用都是一个或多个 Vue 实例： var vm = new Vue({})V
vue需要了解的一些概念
Bright2017的博客
07-22 2121
vue需要了解的一些概念
1.了解Vue（特点、学Vue之前的基础、Vue官方文档浅读）
树袋熊的博客
06-08 176
1.采用组件化模式、提高代码复用率、且让代码更好维护。 2.声明式编码，让编码人员无须直接操作DOM，提高开发效率 3.使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点。 Vue官方文档 在顶部上方的栏目（学习）中...
快速了解vue（1）
SiuMu_的博客
03-11 374
前言 今天呢，我们就来科普一下学习vue需要了解的知识常识，比如Node.js啊，Webpack啊之类的。当然，我是不可能照着这些技术的官方文档抄的。有时候，官方文档的一些专业术语搞的人很懵。比如我们学习Spring的时候，什么控制反转啊，依赖注入啊，面向切面编程啊，这些术语就很让人懵逼，但是当你对它有点了解的时候，又会发现，这些词又是这么的恰当准确。所以，我刚开始就尽量少抄官方文档说的话。 ...
vue的了解与使用
qq_54516125的博客
04-03 1258
vue的简介与使用
快速了解vue（3）
SiuMu_的博客
04-15 346
.vue文件 上次我们说到了.vue文件，那么这是个什么文件呢？啥也不是，就是个vue组件。我们都说要组件化，模块化什么的，这.vue文件就是个组件，打开看看就知道了，它这里有两个，主要的标签，一个是<template>，一个是<script>。这些我们肯定看得懂，<template>标签里是写HTML的，页面就是由这许许多多的组件拼出来的，就像拼图似的，想要...
一分钟带你了解vue
sherly_chen的博客
10-23 451
vue是什么？它可以为我们代码开发带来哪些便利？为什么它会成为市场主流？它和我们之前使用的js原生有什么区别？相信很多小白都会有这样的疑惑，下面我将带你一一解答；
一文了解vue基本概念
marylgao技术专栏
05-03 963
Vue实例 Vue实例是Vue应用的启动器，对于SPA(Single Page Web Application),只会创建一个Vue根实例。 当我们实例化一个Vue实例时，需要传入选项对象，可包含data(数据相关), template(模板），el(挂载元素), methods(方法)与生命周期钩子函数(created, mounted…)等等，具体可见Vue选项对象。 new Vue({ ...
Vue篇(超详细讲解)
最新发布
2301_77112535的博客
12-14 7166
Vue:一套用于构建用户界面的渐进式JavaScript框架渐进式: vue可以自底向上逐层的应用如果应用很简单:只需要一个轻量小巧的核心库如果应用很负责:可以引用各式各样的Vue插件1、采用组件化模式,提高代码复用率,且让代码更好维护。2、声明式编码,让编码人员无需直接操作DOM,体高开发效率、3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点。1、Vue的操作命令 启动.Vue 去你对应的包里 直接 yarn serve2、首先先需要检测自己是否安装了yarn 命令。
vue基础详解（全）
梁婉玲krysliang的博客
02-14 1万+
一，VUE的核心 1.数据驱动（mvvm模型，只要改变model的数据，视图层就会自动更新） 2.视图组件： 把整一个网页的拆分成一个个区块，每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。 二，使用vue 1.引入vue之后就可以进行下面的步骤 2.创建语法（创建 ，设置数据，挂载，渲染） var vm = new Vue（{}）//参数是一个对象 三、定义...
vue.js之v-model与v-once
猫老板的豆
11-07 987
v-model指令( 双向绑定 ) v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。 &lt;div id="app"&gt; &lt;input v-model="message"&gt; &lt;p&gt;输入：{{ message }}&lt;/p&gt; &lt;/div&gt; &l
初学 Vue v-model、v-once
qq_36786909的博客
05-25 182
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;bind&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue
Vue常用指令（v-model，v-once，v-if，v-show）举例
hq.zheng的博客
07-10 1394
举例代码：&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"&gt; &lt;title&gt;vue的常用指令&a
v-model和v-for指令
热门推荐
01-19 4万+
http://cn.vuejs.org/v2/guide/ 1.基本雏形<!DOCTYPE html> <html> <head> <title></title> <script src="https://unpkg.com/vue/dist/vue.js"></script> <script type="text/javascript"> window.o
4、Vue指令v-once、v-pre、v-model
weixin_46841213的博客
04-02 734
Vue指令v-once、v-pre、v-model1、v-once2、v-pre3、v-model3.1、v-model介绍3.2、v-model修饰符3.2.1、.lazy3.2.2、.number3.3.3、.trim 1、v-once v-once：只渲染一次，之后的重新渲染，元素及其所有的子节点将被视为静态内容并跳过。因为它使用缓存中的值，不再使用vm中的值，数据也就不再变化。这可以用于优化跟新性能。 <body> <div id="app"> &l
了解vue需要做到什么程度
06-04
了解 Vue，需要掌握以下几个方面： 1. Vue 的基础语法：掌握 Vue 的模板语法、指令、计算属性、监听器、生命周期等基本概念和用法。 2. Vue 组件化开发：了解 Vue 的组件化思想和组件的使用方法，以及组件的通信...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值