在编写第一个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>