【Vue】vue基础知识一（本地数据操作）

javaScript 框架

简化Dom的操作

响应式数据驱动

简单的vue程序：

1.导入开发版本的vue.is

2.创建vue实例对象，设置el属性和data属性

3.使用简介的模版语法把数据渲染到页面上

vue实例可以使用双标签挂载，不能使用HTML和BODy来进行

v-text . 设置标签的文本值 (覆盖标签中全部的内容 {{}} el只会替换相应的值)

<div id="app">
        <h1 v-text="message"></h1>
        <h1 v-text="message+'!'"></h1>
        <h1>我的  {{Student.name}}</h1>
    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:{
                message:"hello world",
                Student:{
                    name:"二狗子",
                    age:12
                },
                score:[12,32,4,32]
            }
        })
    </script>

v-html (1.内容中有html结构会被解析成标签 2.设置元素的innerHTML)

注：解析文本使用 v-text . 解析hml使用v-html

<div id="app">
    <p v-html="context"></p>
    <p v-text="context"></p>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
           context:"<a href='http://www.baidu.com'>我的一个小demo<a>"
        }
    })
</script>

v-on(1.为元素绑定事件，2.事件名不需要写on,3.指令可以简写@ 4.绑定的方法定义在methods属性中5.方法内部可以通过this关键字访问定义data中的数据)

<div id="app">
    <input type="button" value="点我" v-on:click="clickIt">
    <input type="button" value="点我2" @click="clickIt">
    <input type="button" value="点我3" @dblclick="clickIt">
    <h2 @click="changeLOve">{{message}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            message:"我爱你"
        },
        methods:{
            clickIt:function () {
                alert("王彩云，我爱你！！！");
            },
            changeLOve:function () {
                this.message = "永远";
                console.log(this.message);
            }
        }
    })
</script>

计数器（创建实例v-on事件和方法绑定，实时更改数据）

<div id="app">
    <button @click="sub">-</button>
    <span>{{number}}</span>
    <button @click="add">+</button>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            number:1
        },
        methods:{
            sub:function () {
                if(this.number<0){
                    alert("已经是最小的啦！！");
                }else{
                    this.number--;
                }
            },
            add:function () {
                if(this.number>=10){
                    alert("已经是最大的啦！！");
                }else{
                    this.number++;
                }
            }
        }
    })
</script>

v-show(1.根据元素的真假切换元素的显示状态 2.原理是修改元素的display实现元素的隐藏)

<div id="app">
    <input type="button" value="切换显示" @click="changeIsShow">
    <input type="button" value="年龄增加" @click="addAge">
    <img v-show="isShow" src="IMG_6626.JPG" alt="">
    <img v-show="age>=25" src="IMG_6626.JPG" alt="">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow:false,
            age:20
        },
        methods:{
            changeIsShow:function () {
                this.isShow = !this.isShow;
                console.log(isShow);
            },
            addAge:function () {
                this.age++;
                console.log(this.age);
            }
        }
    })
</script>

v-if(1.根据表达式的真假切换元素的显示状态 2.本质是操作dom 3.表达式的值是true时，元素存在于dom树中，为否是从dom树中移除)

注：v-show和v-if的区别：

v-show：只是改变了display属性的操作

v-if：改变的是dom数

实际情况频繁切换的使用v-show

<div id="app">
    <input type="button" value="切换显示" @click="toggleisShow">
    <p v-if="isShow">我爱你呀</p>
    <p v-show="isShow">我爱你呀 v-show显示</p>
    <h2 v-if="temperature>40">热死算了</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            isShow:false,      xx  
            temperature:39
        },
        methods:{
            toggleisShow:function () {
                this.isShow = !this.isShow;
            }
        }
    })
</script>

v-bind (1.为元素绑定属性 2.完整写法v-bind:属性名 3.简写的话可以只写:属性名)

<div id="app">
    <img v-bind:src="imgSrc" alt="">
    <br>
    <img :src="imgSrc" alt="" :title="imgTItle">
    <br>
    <img :src="imgSrc" :title="imgTItle" :class="isActive?'active ':''" @click="toggleActive">
    <img :src="imgSrc" :title="imgTItle" :class="{active:isActive}" @click="toggleActive">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            imgSrc:"http://www.itheima.com/images/logo.png",
            imgTItle:"我的哈哈",
            isActive:false
        },
        methods:{
            toggleActive:function () {
                this.isActive = !this.isActive;
            }
        }
    })
</script>

图片切换（1.用数组来存放元素 2.用v-on来绑定事件 3.用v-bing来修改元素的属性）

<div id="app">
    <div class="center">
        <img :src="arrayl[index]" alt="">
        <a href="javaScript:void(0)" v-show="index!=0"
           @click="prev" class="left">
            <img src="左箭头.jpeg">
        </a>
        <a href="javaScript:void(0)" v-show="index<arrayl.length-1"
           @click="back" class="right">
            <img src="右箭头.jpg">
        </a>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            arrayl:[
                "IMG_6626.JPG",
                "IMG_20190213_221749.jpg",
                "IMG_20190214_171354.JPG",
                "IMG_20190214_224520.jpg",
                "IMG_20190214_224523.jpg",
                "IMG_20190216_185419.jpg",
            ],
            index:0
        },
        methods:{
            prev:function () {
                this.index--;
            },
            back:function () {
                this.index++;
            }
        }
    })
</script>

v-for(1.根据数据生成列表 2.v-for长和)

<div id="app">
    <button @click="add">点我➕</button>
    <button @click="del">点我➖</button>
    <ul>
        <li v-for="item in name">{{item }}</li>
    </ul>
    <h2 v-for="item2 in score">{{item2}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
   var app = new Vue({
     el:"#app",
     data:{
         name:[
             "狗子",
             "傻狗",
             "老婆",
             "胖胖"
         ],
         score:[
             21,32,54,743
         ]
     },
       methods:{
         add:function () {
            this.score.push(100);
         },
           del:function () {
                this.score.shift()
           }

       }
   })
</script>

v-on (补充)（1.时间绑定的方法写成函数调用的形式，可以传入自定义参数

2.定义方法时定义形参数来接受传入的实参

3.通过.修饰符可以对事件进行限制）

例如：@keyup.enter

<div id="app">
    <input type="button" value="click me" @click="doIt(1,2)">
    <input type="text" @keyup.enter="sayHi">
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        methods:{
            doIt:function (p1,p2) {
                console.log(p1);
                console.log(p2);
            },
            sayHi:function () {
                alert("我好想你！！！");
            }
        }

    })
</script>

v-model(1.便捷的设置和获取表单元素的值

2.绑定的数据会和表单元素值相关联

3. 表单的数据=绑定的数据)

<div id="app">
    <input type="button" value="click me" @click="changeMessage">
    <input type="text" v-model="message" @keyup.enter="getA">
    <h2>{{message}}</h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message:"二狗子我好想你啊"
        },
        methods:{
            getA:function () {
                alert(this.message);
            },
            changeMessage:function () {
                this.message = "我真的好想你啊"
            }
        }
    })
</script>

记事本实战演练(1.增加 2.删除 3.隐藏 4.清空 )

注：shift()函数删除的是数组中的第一个元素使用splice删除指定的某个元素

<!--主题区域-->
<section id="app">
    <!--输入框-->
    <header class="header">
        <h1>欢欢笔记本</h1>
        <input type="text" autocomplete="off" autofocus="autofocus"
               placeholder="请输入" class="new-todo" v-model="inputValue"
               @keyup.enter="add">
        <!--列表区域-->
        <section class="main" v-show="list.length!=0">
            <ul class="todo-list">
                <li class="todo" v-for="(item,index) in list">
                    <span class="index">{{index+1}}.</span>
                    <label class="item">{{item}}</label>
                    <button class="destroy" @click="del(index)">del</button>
                </li>
            </ul>
        </section>
        <!--统计和清空-->
        <footer class="footer" v-show="list.length!=0">
            <span class="todo-count" v-if="list.length!=0">
        <strong>{{list.length}}</strong>items left
             </span>
            <button class="clear-completed" @click="clear">clear</button>
        </footer>
    </header>
</section>
<!--底部文件-->
<footer class="info">
</footer>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            list:["语文","高数","政治","外语"],
            inputValue:"你是我的人了"
        },
        methods:{
            add:function () {
                this.list.push(this.inputValue);
            },
            del:function (index) {
                this.list.splice(index,1);
            },
            clear:function () {
                this.list=[];
            }
        }
    })
</script>

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,406评论 6赞 503
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,732评论 3赞 393
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,711评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,380评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,432评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,301评论 1赞 301
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,145评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,008评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,443评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,649评论 3赞 334
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,795评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,501评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,119评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,731评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,865评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,899评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,724评论 2赞 354

【Vue】vue基础知识一（本地数据操作）

推荐阅读更多精彩内容