Vue.js开发基础入门 —2018年9月27日23时45分 - php培训第三期作业

Home > List of blog posts > Vue.js开发基础入门 —2018年9月27日23时45分

Blogger Information

Blog 34

fans 0

comment 1

visits 23061

Special Recommendation

More>

Related recommendations

实例

 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、问答:什么是vue.js中的模型对象，本质是什么，如何在实例中声明的？

    （1）实例: Vue.js本身就是一个构造函数,可以用来创建对象,使用Vue第一步,就是要创建一个Vue实例:new Vue();
    （2）实例参数: Vue()接受一个js字面量对象做为参数,所有的功能,都以对象属性的方式进行设置;
    （3）挂载点: Vue实例的作用域,本质上就是通过css选择器获取到的页面元素;
    （4）模板: 带有html标签的字符串;
    （5）值/变量: 挂载点中的文本内容;
    （6）属性: 描述模板或html标签;
    （7）事件: 模板或元素上发生的系统或用户事件,例如点击,移动等;

3、实例演示: v-text,v-html变量渲染时的区别；

实例

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <title>Vue</title>
    </head>
    <body>
        <div id="box">
            <!--以插值的方式显示内容-->
            {{message1}}
            <br>
            {{message2}}
            <p v-text="message2"></p>
            <p v-html="message2"></p>
        </div>
        <script>
            new Vue({
                //绑定挂载点
                el:'#box',
                data:{
                    message1:'Vue.js开发基础',
                    message2:'<h3 style="color:red">php中文网</h3>'
                    
                }                
            });             
        </script>          

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、属性绑定v-bind和事件绑定v-on的使用方法

实例

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <title>Vue</title>
    </head>
    <body>
        <div id="box">
            <!--1、模板绑定-->
            <h3>{{message}}</h3>
            
            <!--2、属性绑定-->
            <h3 style="color:red">{{message}}</h3>
            <h3 :style="style+'font-size:2rem;'">{{message}}</h3>
            
            <!--3、事件绑定-->
            <!--v-on-->
            <!--事件对应的方法必须写到Vue实例中的methods属性中-->
            <h3 v-on:click="showDesc">{{message}}</h3>
            <h3 @click="changeText">{{message}}</h3>
        </div>
        <script>
            new Vue({
                //绑定挂载点
                el:'#box',
                //template:'<h3 style="color:red">《JavaScript权威指南最新》</h3>',
                data:{
                    message:'《JavaScript权威指南》',
                    style:'color:blue;'       
                },
                methods:{
                    changeText:function(){
                        this.message="《Vue.js权威指南》";
                    }
                }
            });             
        </script>          

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5、双向数据绑定的原理与实现: v-model指令

实例

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <title>双向数据绑定</title>
    </head>
    <body>
        <div id="box">
            <!--双向绑定：模型中的数据由页面中的数据决定-->
            <input type="text" v-model="info">
            
            <h3>{{info}}</h3>
            
        </div>
        <script>
            new Vue({
                //绑定挂载点
                el:'#box',
                //template:'<h3 style="color:red">《JavaScript权威指南最新》</h3>',
                data:{
                    info:''       
                }
            });             
        </script>          

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

6、观察者/侦听器的实现机制与实例演示

实例

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <title>侦听器</title>
    </head>
    <body>
        <div id="box">
            <!--双向绑定：模型中的数据由页面中的数据决定-->
            用户名：<input type="text" v-model="username"><br>
            <h3>{{length}}</h3>
            <h3 v-show="isShow" :style="warning">{{message}}</h3>
            
           
        </div>
        <script>
            new Vue({
                //绑定挂载点
                el:'#box',
                data:{
                    username:'',
                    length:0,
                    message:'用户名太短',
                    isShow:false,
                    warning:'color:red'
                },
                watch:{
                    // 侦听器:实时监测页面中数据的变化,实时更新数据模型中的属性,并完成指定的动作
                    // Vue是面向数据编程,侦听器当然也是面数据,所以watch中侦听的属性必须是页面中的变量
                    username:function(){
                        this.length++;
                        if(this.length<6){
                            this.isShow=true;
                        }else{
                            this.isShow=false;
                        }
                    }
                    
                }
            });             
        </script>          

    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

html中引入调用另一个html的方法

2018-10-15 10:12:11

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例

实例