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"