vue零基础学习（一）——我的第一个vue程序

在编写第一个vue程序之前先给大家讲解一些基本的知识点。

常用指令：

指令	含义
v-text	把应用程序数据绑定到元素的更新元素的textContent（也可用过 {{}} 来实现）
v-model	把元素值（比如输入域的值）绑定到应用程序
v-bind	可以动态的绑定一个或多个属性到HTML元素上

书写步骤

使用vue库

• 引入

（这里推荐本地引入，还可以使用sdn、npm引入，具体方法在上一篇脚手架安装博文里）

<script src="vue.js" type="text/javascript" charset="utf-8"></script>

• 实例

new Vue({配置})

注意事项

• 实例的时候，vue的V需要大写。

• el:表示挂载视图

  方法	书写语法
  id	el:"#id"
  class	el:".class"

• data：数据模型

//语法格式
data:{
	配置[key:value]
}

具体代码

先看一下效果。

这里我们创建一个简单的HTML网页，里面放了一个标题标签和输入框控件。通过在h1标签中使用{{}}方法、在input标签中通过v-model指令来绑定值。这样就可以实现在输入框中增加或删除内容然后h1标签中的内容随之改变。

<div id="app">
  <h1>{{message}}</h1>
  <input type="text" v-model="message"/>
 </div>

然后开始书写script部分。根据上面的书写步骤，我们先引入，然后实例它，然后再。通过el找到id名，data书写配置。这我们就简单输出一句话。

<script src="vue.js" type="text/javascript" charset="utf-8"></script>
 <script>
  var app=new Vue({
   el:'#app',
   data:{
    message:"今天天气真好!"
   }
  })
 </script>