vue.js2.5快速入门

最新推荐文章于 2021-11-01 22:29:29 发布

qq_41933748

最新推荐文章于 2021-11-01 22:29:29 发布

阅读量773

点赞数 1

本文链接：https://blog.csdn.net/qq_41933748/article/details/82729641

版权

一、创建第一个Vue实例

1、进入https://cn.vuejs.org/>点击学习>教程>进入界面：点击安装>初学者建议使用下载开发版本>进入vue.js的源代码>全选复制>到编辑器(我使用的是idea)中>新建一个文件夹vue>把vue.js和新建的index.html放入其中

2、进行代码编写：

首先使用script引入vue.js在head中，最好不要放在body里面，防止抖屏。

2.1vue中的挂载点，模版，实例之间的关系

<!--el后面对应的id的div就是vue实例的挂载点-->   el：挂载点

<!--挂载点内部的内容都称之为模版内容-->可以写在外面，也可以写在vue实例里面。   template：模版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <!--挂载点，模版，实例之间的关系-->
    <div id="root">
        <!--挂载点内部的内容都称之为模版内容-->
    </div><!--el后面对应的id的div就是vue实例的挂载点-->
    <script>
        new Vue({
            el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
            template:'<h1>hello {{msg}}</h1>',<!--挂载点内部的内容都称之为模版内容-->
            data:{
                msg:"world!"
            }
        })
    </script>
</body>
</html>

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

{{abc}}：插值表达式。

上代码：

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Vue入门</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <div v-text="number"></div><!--v-text显示文本-->
        <div v-html="content"></div><!--v-html显示页面元素-->
        <!--点击hello1自动转换成world1-->
        <!--给div绑定一个click事件的方法名为handleClick-->
        <!--v-on：的简写是@-->
        <div @click="handleClick">{{content1}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
            data:{
                content:"<h1>hello</h1>",
                number:"123",
                content1:"hello1"
            },
            // 执行方法名用methods
            methods:{
                handleClick:function () {
                    // this是Vue的data
                    this.content1="world1"
                }
            }
        })
    </script>
</body>
</html>

2.3 Vue中的属性绑定和双向数据绑定

<!--属性绑定-->
<!--v-bind：模版绑定=后跟的不是字符串是js表达式-->
<!--v-bind简写是：-->

<!--双向数据绑定 1、数据决定页面的显示 2、页面决定数据内容-->
<!--v-model双向绑定-->

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>属性绑定和双向数据绑定</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--属性绑定-->
        <!--v-bind：模版绑定=后跟的不是字符串是js表达式-->
        <!--v-bind简写是：-->
       <div  :title="title">hello world</div>
        <!--双向数据绑定 1、数据决定页面的显示 2、页面决定数据内容-->
        <!--v-model双向绑定-->
        <input v-model="content"/>
        <div>{{content}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
            data:{
                title:"this is hello world",
                content:"this is content"
            }
        })
    </script>
</body>
</html>

2.4 Vue的计算属性和侦听器

// fullName放在computed里面表示它是一个计算属性
// computed表示一个属性通过其他属性通过计算而来，只有依赖的属性发生变化才会发生改变，性能高

// watch侦听器,侦听变化，一旦变化就执行其中的业务逻辑

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        姓：<input v-model="firstName"/>
        名：<input v-model="lastName"/>
        <div>{{fullName}}</div>
        <div>{{count}}</div>
    </div>
    <script>
        new Vue({
            el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
            data:{
                firstName:'',
                lastName:'',
                count:0
            },
            // fullName放在computed里面表示它是一个计算属性
            // computed表示一个属性通过其他属性通过计算而来，只有依赖的属性发生变化才会发生改变，性能高
            computed:{
                fullName:function () {
                    return this.firstName+' '+this.lastName
                }
            },
            // watch侦听器,侦听变化，一旦变化就执行其中的业务逻辑
            watch:{
                firstName:function () {
                    this.count++
                },
                lastName:function () {
                    this.count++
                },
                // 也可以把上面两个换成下面这一个
                fullName:function () {
                    this.count++
                }
            }
        })
    </script>
</body>
</html>

2.5 常用指令v-if、v-show与v-for

<!--当show为false时-->
<!--v-if会移除标签-->
<!--v-show会在属性中把display：none-->
<!--v-show的性能高，不会销毁和重新创建DOM-->
<!--v-if用在隐藏显示比较少的地方，性能会相对高些-->

<!--item是来自list中的元素-->
<!--需要在后面添加：key为了保证每一项数据都不相同-->
<!--可以使用index下标来表示，每个值的下标肯定不一样-->
<!--v-for用来循环显示出列表中的数据-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算属性与侦听器</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="root">
        <!--当show为false时-->
        <!--v-if会移除标签-->
        <!--v-show会在属性中把display：none-->
        <!--v-show的性能高，不会销毁和重新创建DOM-->
        <!--v-if用在隐藏显示比较少的地方，性能会相对高些-->
        <div v-if="show">hello world</div>
        <button @click="handleClick">toggle</button>
        <ul>
            <!--item是来自list中的元素-->
            <!--需要在后面添加：key为了保证每一项数据都不相同-->
            <!--可以使用index下标来表示，每个值的下标肯定不一样-->
            <!--v-for用来循环显示出列表中的数据-->
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el:"#root",//el是vue实例与哪个DOM节点进行绑定,vue会替代DOM操作，主要是面向数据编程
            data:{
                show:true,
                list:[1,2,2]
            },
            methods:{
                handleClick:function () {
                    this.show=!this.show;
                }
            }
        })
    </script>
</body>
</html>

qq_41933748

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js2.5快速入门

一、创建第一个Vue实例1、进入https://cn.vuejs.org/&gt;点击学习&gt;教程&gt;进入界面：点击安装&gt;初学者建议使用下载开发版本&gt;进入vue.js的源代码&gt;全选复制&gt;到编辑器(我使用的是idea)中&gt;新建一个文件夹vue&gt;把vue.js和新建的index.html放入其中2、进行代码编写：首先使用script引入vue.j...
复制链接

扫一扫