您好,欢迎访问代码之道!登录后台查看权限
  • 欢迎大神光临
  • 有朋自远方来 不亦悦乎

Vue入门教程-Vue修仙宝典

杂文 小五 2019-12-11 187 次浏览 0个评论

一、起步

Vue资料

  • 官网 https://cn.vuejs.org/

  • 安装

    和大多数的JavaScript库一样,我们可以通过cdn引入Vue框架,当然也可以放在自己的服务器。

    开发环境:<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    生产环境:<script src="https://cdn.jsdelivr.net/npm/vue"></script>


一个简单的Vue例子

代码地址放在HTML训练营:http://code.codbo.cn/edit/?id=Hello%20Vue


Hello Vue.png


  •  实例化一个Vue,构造Vue的属性包括两个重要的字段,

    “el”:指定这个Vue实例的作用范围(模板);

    “data”:定义数据,为这个Vue实例提供的数据,其中message为自定义的一个数据

  • 数据控制页面渲染,上面例子控制的范围是id=“app”的div标签内。其中使用的Vue的模板,比如{{}}里面可以放置一个data中变量或者JS表达式

  • 输入标签比如<input>会修改绑定的数据

  • 数据的变化可以实时监听到(下面的作业有体现这个特点)


课后作业

一个计算器(参考代码:http://code.codbo.cn/edit/?id=V计算器


二、方法和点击事件监听

Vue模板支持Vue规定的元素属性,一般叫做Vue指令,以“v-”开头。

方法

在构造Vue实例的时候,可以在methods内定义方法,如下面这样

        var app = new Vue(
            {
                el:'#app',
                methods: {
                    method1:function() {
                        alert('method1')
                    },
                    method2:function() {
                        alert('method2')
                    }
                    // ...
                },
                // ...
            }
            )

构造完毕方法将被添加到实例(这里为app)下,因此可以app调用方法,比如

app.method1()

注意,方法被执行时的this是指向Vue实例的,也就是上面的app,因此如果你在一个方法内调用另外一个方法或者访问data下的数据,可以用"this.方法/数据"。比如

this.metho1() // 调用metho1
alert(this.message) // 访问data message

上面的例子中,方法都没有带参数,实际上和普通方法一样,你可以带参数。


绑定点击事件

我们知道html标签的事件属性可以执行一段js,比如onclick=“Script”、ondbclick=“Script”Vue拓展了事件属性,即是v-on:eventName=“Script”。 v-on的脚本可以方便访问Vue的属性(方法、数据),最常用的就是绑定点击事件到方法。为需要监听点击事件的元素添加属性v-on:click:="method",当该元素被点击时,method就会被调用。看一个例子(HTML在线训练营:http://code.codbo.cn/edit/?id=V点击)

    <div id="app">
        <button v-on:click="btn1Click">按钮</button>
    </div>
    
    <script>
        var app = new Vue(
            {
                el:'#app',
                methods: {
                    btn1Click:function() {
                        alert('点我干嘛😕')
                    },
                },
            }
            )
    </script>


v-on因为过于常用,因此Vue提供了缩写版本,用@代替,比如v-on:click可以缩写为@click、v-on:dbclick可以缩写为@dbclick


其他事件

原生的html事件属性都是以on开头,比如onclick,ondbclik,而Vue模板中只是稍作变化,on改为v-on:即可,以此类推。更多的html事件可以参考手册https://www.w3school.com.cn/tags/html_ref_eventattributes.asp

课后作业

计算点击次数,并输出。

参考代码1:http://code.codbo.cn/edit/?id=V点击计数

参考代码2:http://code.codbo.cn/edit/?id=V点击计数2


三、绑定HTML属性

上面提到了通过v-on监听HTML事件,类似地,HTML的属性,比如id、class、style、href、src等等,都可以通过v-bind指定和数据.

其语法为v-bind:属性名称="js表达式"

比如使用数据控制src,指令为v-bind:src="img"

    <div id='app'>
        <p><img v-bind:src="img"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                img:'http://code.codbo.cn/edit/static/ms_qrcode.png'
            }
        })
    </script>


类似地下面例子演示绑定a标签href属性使用(http://code.codbo.cn/edit/?id=VBindAhref

    <div id="app">
        <button v-on:click="url='https://baidu.com'">百度</button>
        <button v-on:click="url='https://360.com'">360</button>
        <a :href="url">搜索用:{{url}}</a>
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                url: 'https://baidu.com'
            }
        })
    </script>


v-bind:class=后为一个字典,key即为类名,值为true时,此类生效,值为false,此值不生效。

下面是一个例子(http://code.codbo.cn/edit/?id=VBindClass

   <style>
        .dark {
           color: #fff;
           background: #000;    
        }
        .white {
           color: #000;
            background: #fff;    
        }
   </style>
   <div id='app'>
        <button v-on:click="isDarkMode=true">暗黑</button>
        <button  v-on:click="isDarkMode=false">白色题</button>
        <div v-bind:class="{dark:isDarkMode,white:!isDarkMode}">你好,世界</div>
    </div>
    
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isDarkMode:false
            }
        })
    </script>


v-bind指定是非常常用的因此Vue提供了缩写版本的语法,因此我们可以用替换v-bind:。比如v-bind:src可以简写为:src。

课后作业

实现一个图片浏览器,参考代码: VImgPlayer


四、条件指令

v-if指令可以根据数据决定是否展示某块HTML,而for指令可以循环输出指令内的html,非常适合展示列表数据。

v-if指令

v-if指令的用法是作为html标签的一个属性,用法为v-if=“js表达式”,当js表达式为false的时候标签将不会输出到页面,为true的时候p标签正常输出。

我们首先体验一个例子(v-if-demo1

  <div id='app'>
        <label>是否显示</label>
        <input type="checkbox" v-model="isShow">
        <p v-if="isShow">小哥哥,玩躲喵喵嘛</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true
            }
        })
    </script>

上面例子通过数据isShow控制p标签是否输出。


我们知道很多编程语言都有if elseif else这几个组合用法,类似地,vue的v-if也可以结合v-else/v-else-if使用,当然也可以三者同时使用。

下面是一个例子,界面需要根据不同的用户类型显示不同的输出(v-if-demo2)。

    <div id='app'>
        <div>
            <template v-if="userType==='normal'">普通用户</template>
            <template v-else-if="userType==='super'">超级用户</template>
            <template v-else>其他用户</template>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                userType: 'normal'
            }
        })
    </script>


v-for指令

for非常适合展示数组数据,下面这个例子(for-demo1)展示了如何通过v-for指令,将一个用户数组输出为html的ul列表。

   <div id='app'>
        <ul>
            <li v-for="(item,index) in users">{{index}} {{item.name}} : {{item.age}}</li>    
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                users: [{name:'黄蓉', age:28}, {name:'郭靖', age:15}]
            }
        })
    </script>

当然如果不需要index可以简化如下

 <li v-for="item in users"> {{item.name}} : {{item.age}}</li>

上面的例子可以看到,v-for指令是参考了js中的for in语法的。




已有 187 位网友参与,快来吐槽:

发表评论