vue框架(一)
一、介绍
1、Vue是什么?
Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
2、指令:
通过指令，来给DOM元素赋值或者其它操作：v-text v-html 根据表达式的真假值，动态地插入、移除元素：v-text v-html v-if\v-else 根据表达式的真假值，动态地显示、隐藏元素：v-show 根据数值渲染元素列表：v-for 绑定元素的属性，可以动态改变：v-bind 根据命令监听且执行事件：v-on v-model：数据双向绑定 它是把视图和数据进行双向绑定，通过视图可以改变数据，也可以通过数据改变视图
每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的
el:
类型：string | HTMLElement
限制：只在由 new 创建的实例中遵守。
详细：提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标。可以是 CSS 选择器，也可以是一个 HTMLElement 实例。
例如：el: "#app"
data：
类型：Object
定义数据，例如： data:{n:1,m:2}
methods
类型：Object
包含函数
例如：methods:{fun:function(){}}
因此在文档中经常会使用vm (ViewModel 的简称) 这个变量名表示 Vue 实例。
当创建一个 Vue 实例时，你可以传入一个选项对象。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。
vue指令示例：
#声明式渲染：Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
#条件：控制切换一个元素的显示也相当简单：
#v-if
<div id="app-3">
<p v-if="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
# v-show
<div id="app-3">
<p v-show="seen">Now you see me</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
#v-if 与v-show的区别是：为false的情况下，v-show 的标签还在文档树中，属性改为display-none，而v-if不在文档树中
#循环
#v-for指令可以绑定数据到数据来渲染一个列表：
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Learn JavaScript' },
{ text: 'Learn Vue' },
{ text: 'Build something awesome' }
]
}
})
#绑定：v-bind 指令可以更新 HTML 属性
#在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定
<div id="app">
<a v-bind:href="url">baidu</a>
</div>
var app = new Vue({
el: '#app',
data: {
url: '"http://www.baidu.com"'
}
})
#缩写：<a :href="url">...</a>
#数据双向绑定
# v-model
<div id="app">
<select v-model="selected" name="fruit">
<option value="">选择一个网站</option>
<option value="www.runoob.com">Runoob</option>
<option value="www.google.com">Google</option>
</select>
<div id="output">
选择的网站是: {{selected}}
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
selected: ''
}
})
</script>
#事件绑定
#v-on
<body>
<div id="v_model">
<input type="text" v-model="show_temp">
<p>{{ show_temp }}</p>
<input type="button" value="click me" v-on:click="show_button">
<select v-model="show_select" >
<option value="111" selected>111</option>
<option value="222">222</option>
<option value="333">333</option>
</select>
</div>
</body>
<script>
var vm = new Vue({
el: "#v_model",
data: {
show_temp: "",
show_select:"111"
},
methods:{
show_button:function () {
alert(this.show_select)
}
}
})
</script>
3、数据发送
1、axios.get
<body> <div id="vue_axios"> <input type="button" value="click me" v-on:click="show_click"> <ul> <li v-for="item in city_list"> {{ item.cityName }}: {{ item.cityCode }} </li> </ul> </div> </body> <script> new Vue({ el: "#vue_axios", data: { city_list: [] }, methods: { show_click: function () { url = "hotcity.json"; var self = this; axios.get(url) .then(function (response) { self.city_list = response.data.data.hotCity; console.log(response.data.data.hotCity) }) .catch(function (err) { }) } } }) </script>
2、axios.post
<body> <div id="axios_post"> <input type="text" > <input type="password"> <input type="button" value="login" v-on:click="login"> </div> </body> <script> var vm = new Vue({ el:"#axios_post", data:{ name:"", pass:"" }, methods:{ login:function () { url = "hotcity.json"; axios.post(url, { name:this.name, password:this.pass }, {"headers":{"Content-Type":"application/x-www-form-urlencoded"}}) .then(function (response) { console.log(response) }).catch(function (err) { }) } } }) </script>
