Vue.js(一)_浅谈vue.js与jsxp开发-优快云博客

本文链接：https://blog.youkuaiyun.com/xp_xpxp/article/details/90652824

简介

Vue.js是一套构建用户界面的渐进式框架,也可以用来构建数据驱动的 WEB 界面
Vue.js语法也可以用于手机APP开发,但是需要借助weex
Vue.js只关注视图层,不仅易于上手,而且还便于与第三方库和既有项目整合
Vue.js主要负责MVC中的MVC这一层,主要工作就是和界面打交道,控制前端页面效果

MVC 和MVVM模式

MVC模式:后端的分层开发模式

在这里插入图片描述

MVVM模式:前端视图层的分层开发思想

在这里插入图片描述

Vue.js的基本使用

在HTML页面中通过URL直接引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--定义一个vue作用域-->
<!--vue实例控制的这个元素区域就是V-->
<div id="app">
    <!-- '{{}}' 表示插值表达式,他的作用是将变量的值覆盖到自己的表达式区域 -->
    <!--将vue实例中的data属性的msg变量值覆盖到p标签的text属性值中-->
    <p>{{msg}}</p>
</div>

<!--引入vuejs文件-->
<script src="https://unpkg.com/vue/dist/vue.js">
<script type="text/javascript" charset="UTF-8">
    //创建vue实例,就是VM调度者
    var vm=new Vue({
        //当前vue实例要控制页面的哪个区域
        //这个vue中的所有属性都会作用于该区域中的内容
        el: '#app',
        //data属性中存放的是el区域中要用到的数据,就是M
        data:{
            //键值对形式
            msg:'hello vue!'
        }
    })
</script>
</body>
</html>

Vue的一些基本指令

v-cloak,v-text,v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-cloak,v-text,v-html</title>

    <style type="text/css">
        /*
           注意:[]表示属性选择器
         */
        [v-cloak]{
            display: none !important;
        }
    </style>

</head>
<body>

<div id="app">
    <!--注意:插值表达式在浏览器上显示的时候会出现白色闪烁,当网速慢的时候尤其明显-->
    <!-- v-cloak 属性可以解决闪烁问题,当插值表达式的内容被解析出来之后,浏览器上的内容才会发生改变,注意需要配合css样式一起使用-->
    <p v-cloak>+++{{msg}}+++</p>

    <!--v-text的作用类似于插值表达式,将内容渲染到指定区域-->
    <!--v-text没有闪烁问题,且他是将变量的值覆盖到元素的整个内容区域-->
    <p v-text="msg">----</p>

    <!--v-html可以将变量中的html代码解析出来-->
    <p v-html="msg2"></p>
</div>

<script src="https://unpkg.com/vue/dist/vue.js">
<script type="text/javascript" charset="UTF-8">
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello',
            msg2:'<h1>哈哈,我是一个大大的H1</h1>'
        }
    })
</script>
</body>
</html>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-bind</title>
</head>
<body>

<div id="app">

    <!--v-bind 将某个变量绑定到某个属性中-->
    <!--v-bind 还可以将变量的值进行运算,然后再绑定到某个属性中-->
    <input type="button" value="提交" v-bind:title="aa+'123'"/>

    <!--注意:'v-bind:'可以简写为':'-->
    <input type="button" value="提交" :title="aa+'456'" />
</div>

<script src="https://unpkg.com/vue/dist/vue.js">
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            aa: '123'
        }
    })
</script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
</head>
<body>

<div id="app">

    <!--v-on 类似于onXxx,用来绑定事件中要执行的vue中定义的方法 -->
    <input type="button" value="提交" v-on:click="show">

    <!--'v-on:' 可以简写为'@'-->
    <input type="button" value="提交" @mouseover="show">
</div>

<script src="https://unpkg.com/vue/dist/vue.js">
<script type="text/javascript" charset="UTF-8">
    var vm=new Vue({
        el:'#app',
        data:{
            msg:'hello'
        },
        //定义方法
        methods:{
            show:function () {
                alert("aa");
            }
        }
    })
</script>
</body>
</html>

练习:实现一个文字滚动效果

需求:点击某个按钮,将输入框中的文字循环滚动起来

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习:</title>
</head>
<body>

<div id="app">

    <!--为按钮绑定一个事件-->
    <input type="button" value="浪起来" v-on:click="change">

    <input type="button" value="低调" v-on:click="reset">

    <h4 v-cloak>{{msg}}</h4>
</div>

<script src="https://unpkg.com/vue/dist/vue.js">
<script type="text/javascript" charset="UTF-8">
    var vm = new Vue({
        el: '#app',
        data: {
            msg: '猥琐发育,别浪~~~!',
            intervalId:null,  //定义定时器的id,为了在其他方法中调用定时器对象
            resMsg:null
        },
        methods:{
            //定义一个方法,开启一个定时器,定时截取msg内容的第一个字符,放到源字符串后面
            change(){
                //在vue实例中,如果想要获取data中的数据,或者想要调用methods中的方法,需要使用'this.'
                //console.log(this.msg);

                //定时任务
                if (this.intervalId!=null){
                    //如果当前已经开启了定时器,那么就别在开启定时任务了
                    //防止定时任务无法关闭
                    return;
                }
                if (this.resMsg==null){
                    this.resMsg=this.msg;
                }

                //注意:'()=>{}'这是es6中的写法,类似于"function(){}"
                this.intervalId=setInterval(()=>{
                    //箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定
                    //所谓的定义时候绑定，就是this继承的是父执行上下文里面的this，切忌是父执行上下文
                    //可以理解为:箭头函数内部的this和箭头函数外部的this保持一致
                    var msg=this.msg;
                    //获取字符串第一个字符
                    var start=msg.substr(0,1);
                    //原字符串剩下的内容
                    var end=msg.substr(1);
                    //字符串拼接(将第一个字符串放到源字符串的后面)
                    var newMsg=end+start;
                    //将新拼接的字符串赋给源msg变量
                    //注意:vm实例会监听自己身上的data中所有的数据的改变,一旦数据发生变化,
                    //就会自动将最新的数据更新到原来的变量中,然后渲染到页面中
                    //好处:程序员只需要关注数据,不需要考虑如何渲染到dom页面
                    this.msg=newMsg;

                },400);
                //想想一下:定时任务每隔一段时间截取msg的第一个字符放到msg的最后面,就可以形成一种循环跑马灯的效果
            },

            reset(){
                //停止定时器,下次开启的时候又是一个新的定时任务
                clearInterval(this.intervalId);
                this.intervalId=null;

                //msg内容复原
                this.msg=this.resMsg;
            }
        }
    })
</script>
</body>
</html>