Vue-基础语法

什么是Vue.js？

☛Vue.js是目前最火的一个前端框架。React是最流行的前端框架（都可以进行手机App的开发）；
☛Vue.js是一套构建用户界面的框架，只关注视图层，易于上手；
☛Vue.js主要负责MVC中的V这一层，主要与界面打交道，来制作页面效果。

框架与库的区别

☛框架：是一套完整的解决方案，对项目的侵入性较大，项目如果需要更换框架，则需要重新架构整个项目。
☛库（插件）：提供某一个小功能，对项目的侵入性较小。

Node（后端）中的MVC 与 前端中的MVVM之间的区别?

☛MVC——M-Model层： 处理数据的CRUD增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)；
...................V：视图层，前端页面；
...................C：业务逻辑层，controller控制层：登录、注销等；


后端MVC思想.png

☛MVVM——是前端视图层的概念，分为Model，View，VM-ViewModel。


前端MVVM思想.png
Vue.js基本代码和MVVM之间的对应关系
<body>
    <!-- 将来new的Vue实例，会控制这个元素中的所有内容 -->
    <!-- ******Vue实例所控制的元素区域，就是我们的V -->
    <div id="app">
        <p>{{msg}}</p>
    </div>
    <script>
        // 2.创建一个Vue的实例
        // 当我们导入包之后，在浏览器的内存中，就多了一个Vue构造函数
        // ******注意：我们new出来的这个VM 对象，就是我们MVVM中VM 的调度者
        var vm = new Vue({
            el:'#app',  //表示当前我们new的这个vue实例，要控制页面上的哪个区域
            // *******这里的data就是MVVM中的 M ，专门保存每个页面的数据的
            data:{      //data属性中，存放的是el中要用到的数据
                msg:'欢迎学习Vue'  //通过Vue提供的指令，很方便就能把数据渲染到页面上，程序员不再手动操作DOM元素了
            }
        })
    </script>
</body>
v-cloak、v-text、v-html指令
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 使用 v-cloak 能够解决 插值表达式闪烁的问题，可以显示++++ -->
        <p v-cloak>++++++{{msg}}+++++</p>

        <!-- 1.默认 v-text 是没有闪烁问题的 -->
        <!-- 2.v-text、v-html会覆盖元素中原本的内容，不会显示“******”和“12345678” -->
        <h4 v-text="msg">************</h4>

        <!-- 3.v-html可以把内容当做html来显示出来,其他方式会连带标签 -->
        <div>{{msg2}}</div>
        <div v-text="msg2"></div>
        <div v-html="msg2">12345678</div>
    </div>

    <script src="vue.js"></script>

    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'yuyu',
                msg2:'<h1>小鱼儿与花无缺<h1>'
            }
        })
    </script>
</body>
</html>
02对应结果图.png
v-bind指令
<body>
    <div id="app">
        <!-- v-bind：是Vue中提供的用于绑定属性的命令 -->
        <input type="button" value="按钮" v-bind:title="mytitle+'123'">
        
        <!-- 注意：v-bind: 指令可以被简写为 :要绑定的属性 -->
        <!-- v-bind中  也可以写合法的JS表达式 -->
        <input type="button" value="按钮" :title="mytitle+'123'">
    </div>

    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                mytitle:'自己定义的title'
            }
        })
    </script>
</body>
v-on指令
<body>
    <div id="app">
        <!-- Vue 中提供了v-on：事件绑定机制 -->
        <input type="button" value="按钮" v-on:click="show">
    </div>
    
    <script src="lib/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                mytitle:'自己定义的title'
            },
            // 这个methods属性中定义了当前Vue实例中所有可用的方法
            methods:{
                show:function(){
                    alert('hello');
                }
            }
        })
    </script>
</body>
跑马灯效果

分析：
1、给【浪起来】按钮，绑定一个点击事件 v-on || 简写@
2、 在按钮的事件处理函数中，写相关的业务逻辑代码：拿到msg字符串，然后 调用 字符串的substring来进行字符串的截取操作，把第一个字符串取出来，放到最后一个位置即可；
3、为了实现点击一下按钮，自动截取的功能，需要把步骤2中的代码，放到一个定时器中。

<body>
    <div id="app">
        <input type="button" value="浪起来" @click="lang">
        <input type="button" value="停止" @click="stop">

        <h4>{{msg}}</h4>
    </div>

    <script>
        // 注意：在VM实例中，如果想要获取data中的数据，或者想要调用methods中的方法，必须通过this.数据属性名  或  this.方法名 
        //  来进行访问，这里的this，就表示我们new出来的VM实例对象
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'猥琐发育，别浪~~~',
                intervalId:null   //在data上定义  定时器ID
            },
            methods:{
                lang(){
                    // 箭头函数能够使内部的this和外部的this永远保持一致，解决this指向的问题
                    if(this.intervalId != null) return;
                    this.intervalId = setInterval( () => {
                        // 获取到头的第一个字符
                        var start = this.msg.substring(0,1)
                        // 获取到后面的所有字符
                        var end = this.msg.substring(1)
                        // 重新拼接得到新的字符串，并赋值给this.msg
                        this.msg = end + start
                    },200)
                    // 注意：VM实例会监听自己身上data中所有数据的改变，只要数据一发生变化，就会自动把最新的数据，从data上同
                    // 步到页面中去；【不需要考虑如何重新渲染DOM页面】
                },

                // 终止定时器
                stop(){
                    clearInterval(this.intervalId);
                    this.intervalId = null;
                }
            }
        })
    </script>
</body>
事件修饰符
<body>
    <div id="app">
        <!-- 使用.stop阻止向上冒泡 -->
        <div class="inner" @click="yuyu">
            <input type="button" value="我爱你" @click.stop="leilei">
        </div>
        <!-- 使用.prevent阻止默认事件 -->
        <a href="http://www.baidu.com" @click.prevent="love">有问题找百度</a>
        <!-- 使用.captrue实现捕获触发事件的机制 -->
        <div class="inner" @click.capture="yuyu">
            <input type="button" value="我爱你" @click="leilei">
        </div>
        <!-- 使用.self实现只有点击当前元素才会触发事件处理函数 -->
        <div class="inner" @click.self="yuyu">
            <input type="button" value="我爱你" @click="leilei">
        </div>
        <!-- 使用.once只触发一次事件处理函数 -->
        <a href="http://www.baidu.com" @click.prevent.once="love">有问题找百度</a>
        <!-- .stop 和 .self的区别 -->
        <div class="yulei" @click="yulei">
            <div class="inner" @click="yuyu">
                <input type="button" value="我爱你" @click.stop="leilei">
            </div>
        </div>
        <!-- .self只会阻止自己身上冒泡行为的触发，并不会真正阻止冒泡行为 -->
        <div class="yulei" @click="yulei">
            <div class="inner" @click.self="yuyu">
                <input type="button" value="我爱你" @click="leilei">
            </div>
        </div>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{},
            methods:{
                yuyu(){
                    alert('鱼鱼');
                },
                leilei(){
                    alert('磊磊')
                },
                love(){
                    alert('I Love You')
                },
                yulei(){
                    alert('鱼鱼love磊磊')
                }
            }
        })
    </script>
</body>
v-model双向数据绑定
<body>
    <div id="app">
        <h4>{{msg}}</h4>
        <!-- 使用v-model可以实现表单元素和Model中数据的双向绑定 -->
        <!-- 注意：v-model只能运用在表单元素中 -->
        <!-- input（radio，text，address，email..)select  checkbox  textarea -->
        <input type="text" v-model="msg" style="width: 100%">

        <!-- v-bind只能实现数据的单向绑定，从M自动绑定到V -->
        <!-- <input type="text" v-bind:value="msg" style="width: 100%"> -->
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'v-model数据双向绑定'
            }
        })
    </script>
</body>
v-model简易计算器demo
<body>
    <div id="app">
        <input type="text" v-model="n1">
        <select v-model="opt">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" v-model="n2">
        <input type="button" value="=" @click="count">
        <input type="text" v-model="result">
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                n1:0,
                n2:0,
                opt:'+',
                result:0
            },
            methods:{
                count(){
                    // 逻辑：
                    switch(this.opt){
                        case '+':
                            this.result = parseInt(this.n1)+parseInt(this.n2)
                        break;
                        case '-':
                            this.result = parseInt(this.n1)-parseInt(this.n2)
                        break;
                        case '*':
                            this.result = parseInt(this.n1)*parseInt(this.n2)
                        break;
                        case '/':
                            this.result = parseInt(this.n1)/parseInt(this.n2)
                        break;
                    }

                    // 注意：这是投机取巧的方法，正式开发中，尽量少用
                    var sum = 'parseInt(this.n1)'+this.opt+'parseInt(this.n2)'
                    this.result = eval(sum);
                }
            }
        })
    </script>
</body>
Vue中的class样式
<style>
      .red{
           color: red; 
        }
        .thin{
            font-weight: 200;
        }
        .italic{
            font-style: italic;
        }
        .active{
            letter-spacing: 0.5em;
        }
</style>
<body>
    <div id="app">
        <!-- 第一种方式，直接传递一个数组，注意：这里的class需要使用v-bind做数据绑定 -->
        <h2 :class="['red','thin','italic']">小鱼儿与花无缺</h2>

        <!-- 在数组中使用三元表达式 -->
        <h2 :class="['red','thin','italic',flag?'active':'']">小鱼儿与花无缺</h2>

        <!-- 在数组中使用 对象来代替三元表达式，提高代码可读性 -->
        <h2 :class="['red','thin','italic',{'active':flag}]">小鱼儿与花无缺</h2>

        <!-- 在为class使用 v-bind 绑定对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号；属性值是一个标识符 -->
        <h2 :class="classObj">小鱼儿与花无缺</h2>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true,
                classObj:{red:true,thin:true,italic:false,active:true}
            },
        })
    </script>
</body>
Vue中的内联样式
<body>
    <div id="app">
        <!-- 对象就是无序键值对的集合 -->
        <!-- <h1 :style="{color:'red','font-weight':'200'}">这是一个h1</h1> -->
        <h1 :style="styleObj1">这是一个h1</h1>

        <h1 :style="[styleObj1,styleObj2]">这是一个h1</h1>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                styleObj1:{color:'red','font-weight':'200'},
                styleObj2:{'font-style':'italic'}
            }
        })
    </script>
</body>
Vue指令值v-for 和 key属性
<body>
    <div id="app">
        <!-- v-for循环普通数组 -->
        <p v-for="(item,index) in list">索引值{{index}}---对应值{{item}}</p>

        <!-- v-for循环对象数组 -->
        <p v-for="(item,index1) in list1">ID:{{item.id}}---名字：{{item.name}}</p>

        <!-- v-for循环对象 -->
        <p v-for="(item,key,index2) in list2">信息:{{item}}---键值：{{item.name}}---索引：{{index2}}</p>
    
        <!-- 如果使用v-for迭代数字的话，前面的count值从1开始 -->
        <p v-for="count in 10">这是第{{count}}次循环</p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                list:[1,2,3,4,5,6],
                list1:[
                    {id:1,name:'yuyu1'},
                    {id:2,name:'yuyu2'},
                    {id:3,name:'yuyu3'},
                    {id:4,name:'yuyu4'},
                ],
                list2:{
                    id:1,
                    name:'yuer',
                    sex:'女'
                }
            }
        })
    </script>
</body>
Vue指令值v-for 和 key属性 的 使用
<body>
    <div id="app">
        <label>
                ID:<input type="text" v-model="id">
        </label>
        <label>
                Name:<input type="text" v-model="name">
        </label>
        <input type="button" value="添加" @click="add">
        <!-- 循环的时候，key属性只能使用number获取string -->
        <!-- key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 -->
        <!-- 在组件中使用v-for循环的时候，或者在一些特殊的情况中，如果v-for有问题，必须在使用v-for的同时，指定唯一的 字符串/数字 类型 :key值 -->
        <p v-for="item in user" :key="item.id">
            <input type="checkbox">
            {{item.name}}
        </p>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                id:'',
                name:'',
                user:[
                    {id:1,name:'yuyu1'},
                    {id:2,name:'yuyu2'},
                    {id:3,name:'yuyu3'},
                    {id:4,name:'yuyu4'},
                ]
            },
            methods:{
                add(){
                    this.user.unshift({id:this.id,name:this.name})
                }
            }
        })
    </script>
</body>
v-if 和 v-show 的使用
<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <!-- v-if：每次都会重新删除或创建元素 -->
        <h3 v-if="flag">这是用v-if控制的元素</h3>
        <!-- v-show：只是切换了元素的display：none 样式 -->
        <h3 v-show="flag">这是用v-show控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el:'#app',
            data:{
                flag:true
            },
        })
    </script>
</body>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,080评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,422评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,630评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,554评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,662评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,856评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,014评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,752评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,212评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,541评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,687评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,347评论 4赞 331
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,973评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,777评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,006评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,406评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,576评论 2赞 349

推荐阅读更多精彩内容

  • vue 学习总结
    # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,530评论 0赞 6
  • week 8
    视频总结：视频范围：week1 The recipe for deducing square root canno...
    猪蹄炖粥阅读 265评论 0赞 0
  • 霸道的父亲
    文／冰丘夜蝶 踩着松软的黄土，远远地便看到了那个半坡上矮矮的低檐，还有那青石台上孤寂的身影。不一会，我爬上了半坡，...
    冰丘夜蝶阅读 699评论 0赞 4
  • 一辈子一定要去看一次的五月天
    每个人的青春里，都有一群人的存在。有时，我们怀念的不是那个青春，而是那个青春里的你，我，他。五月天，见证了我们的青...
    婧婧的糖糖阅读 1,572评论 3赞 8