Vue.js简单的使用
Vue.js简单的使用
说明
Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。
Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。 当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。
MVVM模式
ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，这个元素可以是HTML的body元素，也可以是指定了id的某个元素。
当创建了ViewModel后，双向绑定是如何达成的呢？
首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
Hello World示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--这是我们的View-->
<div id="app">
{{ message }}
</div>
</body>
<script src="js/vue.js"></script>
<script>
// 这是我们的Model
var exampleData = {
message: 'Hello World!'
}
// 创建一个 Vue 实例或 "ViewModel"
// 它连接 View 与 Model
new Vue({
el: '#app',
data: exampleData
})
</script>
</html>
1. 在html中使用 {{ message }}，这样的话，在后面script中修改message的时候，就可以实时跟新这个变量了
2. 在 script 中new一个Vue对象，该对象有且应该只有一个，该对象中需要一个 el，里面写上最外层的ID， 下面的操作应该都在这个ID的标签之内
data中的变量在 上面 el 中ID内使用，
双向绑定示例：v-model指令
MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。
<!--这是我们的View-->
<div id="app">
<p>{{ message }}</p>
<input type="text" v-model="message"/>
</div>
将message绑定到文本框，当更改文本框的值时，<p>{{ message }}</p> 中的内容也会被更新。
反过来，如果改变message值，文本框的值也会被更新，我们可以在Chrome控制台进行尝试。
Vue.js的常用指令
上面用到的v-model是Vue.js常用的一个指令，那么指令是什么呢？
Vue.js提供了一些常用的内置指令，接下来我们将介绍以下几个内置指令：
- v-if指令
- v-show指令
- v-else指令
- v-for指令
- v-bind指令
- v-on指令
Vue.js具有良好的扩展性，我们也可以开发一些自定义的指令，后面的文章会介绍自定义指令。
v-if指令
v-if是条件渲染指令，它根据表达式的真假来删除和插入元素，它可以和 v-else 连用，如果判断的条件是正确的，显示if后面的内容，如果false，执行else后面的diamagnetic。它的基本语法如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<p v-if="yes">
你好吗
</p>
<p v-else>
我很好
</p>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
yes: true,
}
});
</script>
</html>
v-else元素是否渲染在HTML中，取决于前面使用的是v-if还是v-show指令。
这段代码中v-if为true，后面的v-else不会渲染到HTML；v-show为tue，但是后面的v-else仍然渲染到HTML了。
v-show指令
v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<h1>Hello, Vue.js!</h1>
<h1 v-show="yes">Yes!</h1>
<h1 v-show="no">No!</h1>
<h1 v-show="age >= 25">Age: {{ age }}</h1>
<h1 v-show="name.indexOf('jack') >= 0">Name: {{ name }}</h1>
</div>
</body>
<script src="js/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
yes: true,
no: false,
age: 28,
name: 'keepfool'
}
})
</script>
</html>
v-for指令
v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="(item, index) in temp">
{{ index }} : {{ item.name }}/{{ item.sex }}/{{ item.age }}
</li>
</ul>
</div>
</body>
<script>
var vm = new Vue({
el: "#app",
data: {
temp: [
{"name": "always", "age":18, "sex": "female"},
{"name": "bubble", "age":20, "sex": "female"}
]
}
})
</script>
</html>
v-bind指令
动态的生成属性可以所缩写成 ：href='' '
v-on指令
绑定事件，可以缩写成@click=“ ”
所有的事件函数，都应该统一卸载 methods 中
axios指令
类似于ajax，
--> get请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
<input type="button" value="click me" @click="showlist">
<ul>
<li v-for="item in stulist">
代码：{{item.cityCode}}
城市：{{item.cityName}}
</li>
</ul>
</div>
<script>
var vm = new Vue({
el: "#myapp",
data: {
stulist: []
},
methods: {
showlist: function () {
url = "./hotcity.json";
var self = this;
axios.get(url,{
params:{
username: "刘德华"
}
})
.then(fun2)
.catch(function(err){
})
}
}
})
function fun2(response)
{
//alter(this);
vm.stulist = response.data.data.hotCity;
console.log(response)
}
</script>
</body>
</html>
params： 数据，也可以写在路径后面
.then： 成功执行的代码
.catch: 失败后执行的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="dist/css/bootstrap.css">
<script src="vue.js"></script>
<script src="axios.js"></script>
</head>
<body>
<div id="myapp">
用户名：<input type="text" v-model="username">
密码： <input type="password" v-model="pass">
<input type="button" value="登录" v-on:click="login" />
</div>
<script>
new Vue({
el: "#myapp",
data:{
username: '',
pass: ''
},
methods:{
login: function () {
url = "hotcity.json";
axios.post(url,{
name: this.username,
password: this.pass
},{
"headers":{"Content-Type": "application/x-www-form-urlencoded"}
}).then(function(response){
console.log(response)
if(response.code == 1){
window.location.href = "http://www.baidu.com"
}
//console.log()
}).catch(function(error){
})
}
}
})
// {code:"1",msg:"success"}
// {code:"0",msg:"fail"}
</script>
</body>
</html>
注意在headers中写上"Content-Type": "application/x-www-form-urlencoded"
浙公网安备 33010602011771号