零基础入门Vue之梦开始的地方—

这篇具有很好参考价值的文章主要介绍了零基础入门Vue之梦开始的地方——插值语法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、Vue

我！作为初学者，既然要将Vue，那我一定要介绍一下他是什么？我们可以应用一下官方的话 vue的介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

由此可见，Vue是一个能让你快速将数据转化为可视化试图的框架。真是我这种不会写界面的福音啊！！

ps：根据官网描述，vue的学习是要在你会前端三剑客的前提下学的，没有学的，尤其是后端开发的人，还是先去过一遍吧。vue的学习前提

1.1 Vue安装

Vue的安装主要有两种，一种是通过<script>标签引入Vue的js文件，还有另外一种是使用npm去安装，后续在.vue文件里面去写vue的代码。

作为初学者的我，即便我会使用nodejs和npm，但奈何尚硅谷的教程是前者，所以我选择记录前者学习Vue的整体过程

所以，如果你想跟着我一起学习，请用以下方式：script标签引入

二、我的N个Vue实例

众所周知，所有语言的入门都是从“Hello world”学起，那么我也选择用我第一个Vue对象去创建一个"Hello world"出来

ps:如果你已熟悉“一”中的内容，请创建好一个html文件，并且用script标签引入vue的js文件

对于创建Vue选项，官网并没有针对于初学者有良好的引入，至少我第一次看文档的时候是蒙圈的：“这个东西咋用？”

对此，可以根据尚硅谷的课程简单入个门，当然也可以阅读他的相关代码或者demo示例。

我用以下代码来展示vue的基本用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
</head>
<body>
    <div id="root">

    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            words:"Hello world" //这是可以存放用于展示的数据
        }
    })
</script>
</html>

在以上简单的代码中，看到vue.js的引入给我们带来了Vue的类，并且我用new创建了Vue的实例对象，Vue的构造器接收一个object对象

作为初学者，我应该知道两个重要的属性

el
data

前者用于绑定dom节点，后者用于存放数据方便展示

2.1 Vue的插值语法

既然代码基础我写好了，那我可要尝试去用用数据在页面上展示咯

根据文档的插值语法相关事例

文本
原始HTML（我不学！！！）
属性绑定 (Attribute)

2.1.1 文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
</head>
<body>
    <div id="root">
        <h1>{{words}}</h1>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            words:"Hello world" //这是可以存放用于展示的数据
        }
    })
</script>
</html>

"{{}}"在这个表达式里面可以写js的表达式，并且它里面的执行语句的this是vue实例，同时vue官方文档指出，在data中配置的东西最后都会通过数据代理的方式挂在到vue实例上。

也就是说可以写{{1+1}}，{{words.split(" ").join(",")}}等。但不推荐将{{}}表达式写的过长，尽量一行搞定。

这样看似好像无用，但当你修改words值得时候，dom节点相关内容也要跟着绑定，不信你可以试试~

2.1.2 属性绑定

同样的道理，写上基本的代码结构，根据官方文档的介绍我们可以使用以下形式去做属性绑定

<dom v-bind:key="value"></dom>

可以在要绑定的属性值前面加上"v-bind"，然后然后在值里面可以写js表达式

具体实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 这里是插值语法 文本 的节点 -->
        <h1>{{words}}</h1>
        <!-- 这个是插值语法 属性绑定 的节点 -->
        <input type="text" v-bind:value="sentence" />
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            words:"Hello world", //这是可以存放用于展示的数据
            sentence:"The world is beatiful for you."
        }
    })
</script>
</html>

从上述代码来看，当在“value”属性值前面加上了“v-bind”之后，""的作用就等同意{{}}，在{{}}能写啥，双引号里面也能写啥（js表达式）

2.1.3 事件绑定

除了“v-bind” 允许你对dom节点的属性绑定之外，vue还允许你对于事件，例如“click” 进行绑定

但是，绑定的方法不能在写到data配置项！！！

在vue配置中，可将方法配置在methods中，实现代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 这里是插值语法 文本 的节点 -->
        <h1>{{words}}</h1>
        <button v-on:click="changeWords">change</button>
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            words:"Hello world", //这是可以存放用于展示的数据
        },
        methods:{
            changeWords(){ //实现一个changeWords方法
                this.words = "Hello Vue!";
            }
        }
    })
</script>
</html>

在以上代码中，当我按下“change”按钮时，h1标签内容会因为words属性改变而改变，此外v-on所绑定的click在双引号内部也可以写js表达式，methods和data的数据一样都是挂在到vm实例上，能够直接索引到。

三、拓展

最后呢，我根据文档（或者尚硅谷的视频）遇到一个比"v-bind"更好用的语法

对于v-bind来说，如2.1.2中的例子，我们对data内部的sentence进行修改，input输入框内容会一起改变这没问题，这实现了数据的绑定

但如果我想要修改输入框的内容，让data的sentence也跟着变化，v-bind做不到，所以文档中有另外一个方式v-model

简单来说它实现了数据和dom的双向绑定，只要有一个改变了另外一个会跟着改变

有趣的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://v2.cn.vuejs.org/js/vue.js"></script>
    <title>梦开始的地方</title>
    <style>
        input{
            width: 200px;
            height: 20px;
        }
    </style>
</head>
<body>
    <div id="root">
        <!-- 这里是插值语法 文本 的节点 -->
        <h1>{{words}}</h1>
        <!-- 这个是插值语法 属性绑定v-model示例 的节点 -->
        <input type="text" v-model:value="words" />
    </div>
</body>
<script type="text/javascript">
    new Vue({
        el:"#root", //绑定元素，el的属性值可以是dom节点也可以是css选择器
        data:{
            words:"Hello world", //这是可以存放用于展示的数据
        }
    })
</script>
</html>

在这个代码中，input的内容改变，h1标签会跟着改变

如此，vue还真的有趣啊~

本篇结束！！！！