vue2.5入门——2.vue基础语法

最新推荐文章于 2024-04-07 09:43:21 发布

chinalihua

最新推荐文章于 2024-04-07 09:43:21 发布

阅读量671

点赞数

分类专栏：慕课vue.js 文章标签： vue-js

慕课vue.js 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、创建第一个vue实例

vue/vue.js
写入vue.js开发版
vue/index.js

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue入门</title> 
        <script type="text/javascript"  src="./vue.js"></script> 
    </head>
    <body>
        <div id="root">{{msg}}</div>

        <script>
            new Vue({//创建一个vue实例
                el:"#root",
                data:{
                    msg:"helloworld"
                }
            })
        </script>
    </body>
</html>

在浏览器打开显示hello world

二、挂载点、模板与实例

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue入门</title> 
        <script  src="./vue.js"></script> 
    </head>
    <body>
        <!-- 挂载点、模板，实例之间的关系 -->
        <div id="root"> </div>

        <script>
            new Vue({
                el:"#root",
                template:'<h1>hello {{msg}}</h1> ',//模板
                data:{
                    msg:"helloworld"
                }
            })
        </script>
    </body>
</html>

①最外层id = root的div称为实例vue的挂载点。

三、Vue实例中的数据、事件和方法

<div v-text = "msg"></div>
<div v-html = "msg"></div>
<div>msg</div>

注意v-text和v-html的区别。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Vue入门</title> 
        <script  src="./vue.js"></script> 
    </head>
    <body>
        <div id="root" v-on:click="handleClick">hello {{msg}}</div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    msg:"hello"
                },
                methods:{
                    handleClick:function() {
                        this.msg = "world"
                    }
                }
            })
        </script>
    </body>
</html>

以上实现了方法点击（事件）hello变成world
v-on可以简写为@

四、vue中的属性绑定和双向数据绑定

1、属性绑定

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>属性绑定和双向数据绑定</title> 
        <script  src="./vue.js"></script> 
    </head>
    <body>
        <div id="root">
            <div v-bind:title="title">hello world</div>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    title:"this is hello world"
                }
            })
        </script>
    </body>
</html>

v-bind:title=”title”,则绑定data下面的title。
可以简写为:titile
相当于title = “this is hello world”
title 鼠标放上去显示的内容

2、双向数据绑定

<div id="root">
            <input v-model = "content"/>
            <div>{{content}}</div>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    content:"this is content"
                }
            })
        </script>

v-model模板指令，输入框内容改变，data里面也改变。双向绑定
:value，data不改变，单向绑定

四、vue中的计算属性和侦听器

1、计算属性 computed

    <body>
        <div id="root">
            姓：<input v-model="firstname" />
            名：<input v-model="lastname" />
            <div>{{fullName}}</div>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    firstname:'',
                    lastname:''
                },
                computed:{
                    fullName: function(){
                        return this.firstname + ' ' + this.lastname
                    }
                }
            })
        </script>

2、侦听器 watch

<div id="root">
            姓：<input v-model="firstname" />
            名：<input v-model="lastname" />
            <div>{{fullName}}</div>
            <div>{{count}}</div>
        </div>

        <script>
            new Vue({
                el:"#root",
                data:{
                    firstname:'',
                    lastname:'',
                    count:0
                },
                computed:{
                    fullName: function(){
                        return this.firstname + ' ' + this.lastname
                    }
                },
                watch:{
                    firstname: function(){
                        this.count ++
                    },
                    lastname: function(){
                        this.count ++
                    }
                }
            })
        </script>

也可以修改为

watch:{
                    fullName: function(){
                        this.count ++
                    }
                }

当输入框里面发生改变时，count加一

六、v-if，v-show，v-for指令

1、v-if

<div id="root">
            <div v-if="show">hello world</div>
            <button @click="handleClick">toggle</button>
 </div>

  <script>
            new Vue({
                el:"#root",
                data:{
                    show:true
                },
                methods:{
                    handleClick: function () {
                        this.show = !this.show;
                    }
                }
            })
</script>

当点击toggle按钮时，hello world会显示或者隐藏
在控制台，当点击toggle按钮，hello world消失时，是对dom中直接把div标签移除。
当修改为 v-show ,hello world消失时，是style =“display:none”
用v-show比较频繁时更好。

2、v-for

            <ul>
                <li v-for="(item,index) of list" :key="index">{{item}}</li>
            </ul>

            new Vue({
                el:"#root",
                data:{
                    list:[1,2,3]
                }

“item of list”意思：循环llist这个数据项；每一次循环吧=把项的内容放到item这个变量里面去；后边把item输出出来。
key的属性，提升每一项渲染的效率/性能。每一项key都不相同。

chinalihua

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue2.5入门——2.vue基础语法

一、创建第一个vue实例vue/vue.js 写入vue.js开发版 vue/index.js<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <title>Vue入门</title> <script type="text/javascript" src="./
复制链接

扫一扫