Vue入门级语法大成

Vue入门级语法

使用方式

新手学习，只需要以引入<script>的方式即可。
在.html 中的head中加上<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>即可
学编程怎么能少了hello world

<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>  
        <div id="app">
            {{ message }}
        </div>      
        <script>
          var app = new Vue({
            el: '#app',
            data: {
              message: 'Hello Vue!'
            }
          })
            </script>
    </body>
</html>

如果是本地测试，最好把vue.js下载到本地，下载地址：https://vuejs.org/js/vue.js

声明式渲染

  • Vue 是一种MVVM 模式，当vue 和一个挂载点绑定之后就可以操作这个挂载点之下的DOM元素
  • 挂载点，通俗的讲就是一个DOM元素，比如上面的代码,vue的el是#app 对应的<div id="app"> {{ message }} </div> 这个div就相当于一个挂载点
  • data中可以自定义任意变量，{{}}这就是vue的显示语法，
  • {{message}} 这个的意思是，显示为vue中的 message字段对应的数据为：hello vue
  • 其实除了<div id="app">{{ message }}</div>这个之外，还可以用<div id="app" v-html="message"></div> 或者 <div id="app" v-text="message"></div>
  • 也就是说除了{{}}语法 还可以用v-text="变量" 或者 v-html="变量" 这种语法的。

条件判断

语法：v-if,如果v-if=true就显示，否则不显示

<body>
    <div id="app">
        <ul>
            <li>苹果</li>
            <li>橘子</li>
            <li v-if="isFruitByBanana">香蕉</li>
            <li v-if="isFruitByTomato">西红柿</li>
            <li v-show="isFruitByBanana">西红柿</li>
        </ul>
    </div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            isFruitByBanana: true,
            isFruitByTomato: false
        }
    });
</script>
</body>

如上，西红柿就不会显示，和v-if有点像的有v-show 用法和v-if一样，区别在于

  • v-if 会把dom元素删除掉
  • v-show 不会把dom元素删除，而是通过style标签隐藏掉

数据绑定

<body>
    <div id="app2" v-bind:title="message" >你还要我怎样 要怎样，你突然来的短信就够我悲伤</div>
<script>
    var app = new Vue({
        el:"#app2",
        data:{
            message:"薛之谦的歌词，v-bind 绑定的是DOM 元素的属性。"
        }
    })
</script>
</body>

v-bind绑定的是DOM元素的属性，当鼠标移到 那行字的时候，title被触发显示我们自定义的数据
当然v-bind不只是可以绑定title属性，

  • v-bind:value
  • v-bind:class
  • v-bind:style
  • 等等。。。

缩写语法：:title ,也就是去掉v-bind,直接:加html属性,例如上面的可以写成
<div id="app2" :title="message" >你还要我怎样 要怎样，你突然来的短信就够我悲伤</div>

列表循环

<body>
    <div id="app">
        <ul >
            <li v-for="item in items">{{item}}</li>
        </ul>

        <ul >
            <li v-for="(item,index) of obj">{{item.age}}</li>
        </ul>
    </div>

<script>
    var app = new Vue({
        el:"#app",
        data:{
            items:["襁褓","孩提","龆年","舞勺之年","舞象之年","而立之年","不惑之年","知命之年","杖乡之年","致事之年","耄耋之年","鲐背之年","不老之年"],
            obj:[{age:"不到周岁", alias:"襁褓"},
                {age:"2-3岁", alias:"孩提"},
                {age:"8岁", alias:"龆年"},
                {age:"13~15岁", alias:"舞勺之年"},
                {age:"15~20岁", alias:"舞象之年"},
                {age:"30岁", alias:"而立之年"},
                {age:"40岁", alias:"不惑之年"},
                {age:"50岁", alias:"知命之年"},
                {age:"60岁", alias:"杖乡之年"},
                {age:"70岁", alias:"致事之年"},
                {age:"80岁", alias:"耄耋之年"},
                {age:"90岁", alias:"鲐背之年"},
                {age:"想死都死不了", alias:"不老之年"},
            ]
        }
    });
    app.obj.push({age:"这是新添加的",alias:"new add"});
</script>
</body>
  • 用 v-for 指令根据一组数组的选项列表进行渲染。v-for指令需要使用item in items 形式的特殊语法，items 是源数据数组并且item是数组元素迭代的别名。
  • 后面第二种的写法也可<li v-for="(item,index) of obj">{{item.age}}</li> 就是加了一个index 索引字段

组件基础

自定义一个组件示例：

 Vue.component("fruit-item",{
    props:["item"],
    template: "<li>{{item.cn_name}}-->{{item.en_name}}</li>"
});
  • 组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <fruit-item>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用
  • Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。如上就是item 属性就是，我们就可以通过item 自定义我们的数据
  • prop是一个数组类型，我们可以从外面传多个数据进来
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <div id="app">
        <ol>
            <fruit-item v-for="fruit in fruits" v-bind:item="fruit"></fruit-item>
        </ol>
    </div>
<script>
    Vue.component("fruit-item",{
        props:["item"],
        template: "<li @click='alertName(item.cn_name)'>{{item.cn_name}}-->{{item.en_name}}</li>",
        methods: {
            alertName: function (name) {
                alert(name);
            }
        }
    });
    var app = new Vue({
        el:"#app",
        data:{
            fruits:[{cn_name:"苹果",en_name:"apple"},
                {cn_name:"梨",en_name:"pear"},
                {cn_name:"杏",en_name:"apricot"},
                {cn_name:"桃",en_name:"peach"},
                {cn_name:"葡萄",en_name:"grape"}
            ]
        }
    })
    app.fruits.push({cn_name:"西红柿",en_name:"Tomato"});
</script>
</body>
</html>

每一个组件就是一个Vue实例，所以在组件中我们也可以在methods定义方法时间，也可以定义data中定义变量。
那我们是不是可以说，每个Vue示例就是一个组件呢？是

表单绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>model 绑定</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }

    </style>
</head>
<body >
<div id="app">
    <p>text：{{text}}</p>
    <textarea v-model="text" cols="50" rows="10" placeholder="随便输一点"></textarea>

    <br>
    <input type="radio" name="sex" v-model="sex" value="男">男<br>
    <input type="radio" name="sex" v-model="sex" value="女">女<br>
    <label>性别：{{sex}}</label>
    <br>

    <br><br><br>
    <select v-model="selected">
        <option v-for="item in list" v-bind:value="item">{{item}}</option>
    </select>
    <span>selected：{{selected}}</span>
    <br>

    <br><br><br><br><br>
    复选框：<input type="checkbox" id="checkbox" v-model="checked">
    <label>{{ checked }}</label>

    <br><br><br><br><br>
    美女：<input type="checkbox" value="美女" v-model="checkeds"><br>
    财富：<input type="checkbox" value="财富" v-model="checkeds"><br>
    长生：<input type="checkbox" value="长生" v-model="checkeds"><br>
    权利：<input type="checkbox" value="权利" v-model="checkeds"><br>

    <br>
    <label>您选择了：{{ checkeds }}</label>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            text: "",
            sex: "",
            selected: "",
            list:["a","b","c","d","e","f","g"],
            checked: false,
            checkeds:[]
        }
    });

</script>
</body>
</html>
  • 你可以用 v-model 指令在表单<input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。

事件处理

<body>
<div id="app">
    <div >当你点击按钮的时候，触发按钮事件按钮文字会反转</div>
    <br>
    <button v-on:click="reverseMessage" >{{message}}</button>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            message: "你是年少的欢喜"
        },
        methods:{
            reverseMessage:function () {
                this.message=this.message.split('').reverse().join('');
            }
        }
    })
</script>
</body>

可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。上述代码按钮绑定的事件方法名为：reverseMessage

  • 语法：v-on:click="方法名"
  • 缩写语法：@click ,代码如下
<div id="app">
    <button @click="eventClick">可以获得DOM原生的事件</button>
    <button @click="say('hi')">Say hi</button>
    <button @click="say2('what',$event)">Say what</button>
</div>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            name: "vue.js",
            count:0
        },
        methods:{
            eventClick:function(event){
                // `this` 在方法里指当前 Vue 实例
                alert('Hello ' + this.name + '!')
                // `event` 是原生 DOM 事件
                alert(event.target.tagName);
            },
            say: function (message) {
                alert(message)
            },
            say2: function (message,event) {
                alert(event.target.innerText);
                console.log("event",event);
            }
        }
    });

</script>
</body>

样式渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-STYLE-CLASS</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            text-align: center;
        }
        .active{
            color: green;
            background: aliceblue;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ol>
            <li>苹果</li>
            <li v-bind:class="classObject" >橘子</li>
            <li>香蕉</li>
            <li class="error" v-bind:class="classObject">西红柿</li>
        </ol>
    </div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            classObject: {
                active: true,
                error: false
            }
        }
    });

</script>
</body>
</html>
  • 我们可以传给 v-bind:class 一个对象，以动态地切换 class：
    <li v-bind:class="classObject" >橘子</li> 在classObject有两个属性，哪个为真就取其样式
  • v-bind:class 指令也可以与普通的 class 属性共存。当有如下模板:
    <li class="error" v-bind:class="classObject">西红柿</li>
    结果渲染为<li class="error active">西红柿</li>
  • 还有组件样式： 如下示例
<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>Vue.component</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }
        .default{
            background: aliceblue;
        }
        .active{
            color: green;
        }
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <div id="app">
        <ol>
            <li class="default">苹果</li>
            <li class="default"  v-bind:style="mystyle">橘子</li>
            <li class="default">香蕉</li>
            <fruit-item class="default" ></fruit-item>
        </ol>
    </div>
<script>
    Vue.component("fruit-item",{
        template: "<li class='active'>葡萄</li>"
    });

    var app = new Vue({
        el:"#app",
        data:{
            mystyle:{
                color:"#FF8809",
                background: 'aliceblue'
            }
        }
    })
</script>
</body>
</html>

组件中可以包含class

计算与监听

<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="UTF-8">
    <title>计算与监听器</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="app">
    <p>姓：<input v-model="firstName" /></p>
    <p>名：<input v-model="lastName" /></p>
    <p>全名:{{firstName}} {{lastName}}</p>
    <p>全名:{{fullName}}</p>
    <p>修改名字的次数：{{count}}</p>
</div>
<script>
    var app = new Vue({
        el:"#app",
        data:{
            firstName:"",
            lastName: "",
            count:0
        },
        computed: {
            fullName: function () {
                return this.firstName + this.lastName;
            }
        },
        watch: {
            fullName: function () {
               this.count++;
            }
        }
    })
</script>
</body>
</html>
  • 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的,在模板中放入太多的逻辑会让模板过重且难以维护,所以有了计算属性
  • 如上的全名需要通过 姓和名 计算而来，计算属性就放在computed中。watch是一个监听器，比如当fullName发生改变的时候，count++`

组件之间的数据传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件间的数据交互</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }

    </style>
</head>
<body >
<div id="app">
    <input type="text" v-model="text"> <button @click="addItem">添加数据</button>
    <br>
    <ul>
        <fruit-item v-for="(fruit,index) of fruits" :item="fruit" :index="index"  @delete="deleteItem"></fruit-item>
    </ul>
</div>
<script>
    Vue.component("fruit-item",{
        props:["item","index"],
        template: "<li @click='liClick'>{{item.cn_name}}-->{{item.en_name}}</li>",
        methods: {
            liClick: function () {
                this.$emit("delete",this.index)
            }
        }
    });
    var vm = new Vue({
        el:'#app',
        data:{
            fruits:[{cn_name:"苹果",en_name:"apple"},
                {cn_name:"梨",en_name:"pear"},
                {cn_name:"杏",en_name:"apricot"},
                {cn_name:"桃",en_name:"peach"},
                {cn_name:"葡萄",en_name:"grape"}
            ],
            text:""
        },
        methods:{
            deleteItem: function (index) {
                this.fruits.splice(index,1);
            },
            addItem: function () {
                this.fruits.push({cn_name:this.text,en_name:"英文是啥"});
                this.text='';
            }
        }
    });

</script>
</body>
</html>
  • 如上demo，我们可以自己加数据，当点击<li>的时候,就需要改变组件外的Vue示例的list 在liClick 方法中我们把参数传递了出去

HTTP 请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>请求</title>
    <script src="../dist/vue.min.js"></script>
    <style>
        #app{
            width: 500px;
            height: 500px;
            margin: 100px auto;
        }

    </style>
</head>
<body >
<div id="app">
    <button @click="getApiData">点击得到数据</button>
    <div v-for="item in result">
        <h3>{{item.title}}</h3><i style="color: #ccc;">{{item.authors}}</i>
        <p>{{item.content}}</p>
        <br>
        <br>
        <br>
    </div>
</div>
<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'Hello World!',
                result:[]
            },
            methods:{
                getApiData:function(){
                    //发送get请求
                    this.$http.get('https://api.apiopen.top/getTangPoetry?page=1&count=20').then(function(res){
                        console.log("res:",res.body);
                        var json = JSON.stringify(res.body);
                        console.log("json:",json);
                        this.result = res.body.result;
                    },function(){
                        console.log('请求失败处理');
                    });
                }
            }
        });
    }

</script>
</body>
</html>

自此基础语法大成！！！

本篇完整代码地址：

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