先引用vue.js 这个可以去到官网下载即可,引入到html页面就可以开发了,最简单的方法。
vue 一般以MVVM组合形式过程来展现出来,model-view-viewmodel这样的
vue的语法:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="./vue.js"></script>
<link rel="stylesheet" href="https://keepfool.github.io/vue-tutorials/01.GettingStarted/styles/demo.css" />
<body>
<!--这是我们的View-->
<div id="app">
{{message}}
<br>
<input type="text" v-model="message"> <!-- 这里的input必须写在vue挂载的div元素里面 不能在外面,否则不显示数据-->
</div>
</body>
<script type="text/javascript">
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
vue中的指令使用:v-if、v-else-if 、v-else、v-show、v-for、v-bind、v-on,v-model...
v-if:用来判断的,主要用来条件判断 :<h1 v-if="no">are you ok !</h1>
v-show:主要用来判断元素的现实问题,类似html中的样式display : <h1 v-show="age>62">v-show:{{name}}</h1>
v-else-if :必须在v-if或v-show后面,搭配使用,不可单独使用,用于否定的条件判断显示。
v-else :必须在v-if或v-show后面,搭配使用,不可单独使用,用于否定的条件判断显示。
v-for:就是个循环指令,用来循环vue实例对象中的数据 : <tr v-for="(p,i) in people">
v-bind:指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute)v-bind:argument="expression",例如:<a v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a>
缩写形式:<a :class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a> 用冒号来代替v-bind
v-on: 指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:<a v-on:click="doSomething">
有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句
下面针对具体的指令,用代码来显示出来。
v-if
指令
是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:v-if="expression"
expression是一个返回bool值的表达式,表达式可以是一个bool属性,也可以是一个返回bool的运算式
//html代码
<div id=app2>
<h1> hello vue.js</h1>
<h1 v-if="yes">welcome to bainuo!</h1>
<h1 v-if="no">are you ok !</h1>
<h1 v-if="age>25">{{age}}</h1>
<h1 v-if="name.indexOf('jason')>-1">{{name}}</h1>
<!--v-else必须跟在v-if或v-show后面使用 v-show即使前面为true,后面也会隐藏的-->
<h1 v-show="age>62">v-show:{{name}}</h1>
<h1 v-else>v-else-1</h1>
<h1 v-if="age>29">{{age}}</h1>
<h1 v-else>v-else-2</h1>
</div>
//vue代码
var vue = new Vue({
el : "#app2",
data:{
yes : true,
no :false,
age :28,
name : 'jason',
}
})
v-show指令
v-show
也是条件渲染指令,和v-if指令不同的是,使用v-show
指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。
<h1 v-show="age>62">v-show:{{name}}</h1>
var vue = new Vue({
el : "#app2",
data:{
yes : true,
no :false,
age :28,
name : 'jason',
}
})
v-else指令
可以用v-else
指令为v-if
或v-show
添加一个“else块”。v-else
元素必须立即跟在v-if
或v-show
元素的后面——否则它不能被识别。
<!--v-else必须跟在v-if或v-show后面使用 v-show即使前面为true,后面也会隐藏的-->
<h1 v-show="age>62">v-show:{{name}}</h1>
<h1 v-else>v-else-1</h1>
<h1 v-if="age>29">{{age}}</h1>
<h1 v-else>v-else-2</h1>
v-for指令
v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:
v-for="item in items"
items是一个数组,item是当前被遍历的数组元素。
<div id="app3">
<table style = "border:1px;">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>地址</th>
</tr>
</thead>
<tbody>
<tr v-for="(p,i) in people">
<td>{{p.name}}-<button @click="deletePerson(i+1)">Delete</button></td>
<td>{{p.sex}}</td>
<td>{{p.address}}</td>
</tr>
</tbody>
</table>
</div>
v-bind指令
v-bind
指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute)v-bind:argument="expression" 例如:v-bind:class
<div id="app4">
<ul class="pagination">
<li v-for="n in pageCount">
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n }}</a>
</li>
</ul>
</div>
v-on指令
v-on
指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听<a>元素的点击事件:
<a v-on:click="doSomething">
有两种形式调用方法:绑定一个方法(让事件指向方法的引用),或者使用内联语句。
<div id="app6">
<a v-on:click="green">aaaaaa</a>
<br>
<br>
<input v-on:click="say('jason')" type="button" value="提交">
</div>
v-bind和v-on you两种缩写方式 :提供了缩写语法 v-bind 为冒号":" , v-on 为 “@”
<div id="app7">
<!--v-bind 和v-on 提供了缩写语法 v-bind 为冒号":" , v-on 为 “@”-->
<!--完整语法
<a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>-->
<!--缩写语法-->
<a href="javascripit:void(0)" :class="1=== 1 ? 'active' : ''">{{ 1 }}</a>
<!--完整语法
<button v-on:click="greet">Greet</button> -->
<!--缩写语法-->
<input @click="say('jason')" type="button" value="提交">
</div>