本文共 4399 字，大约阅读时间需要 14 分钟。
mounted 准备，安排
href hyptertext reference 超文本引用，link和a标签使用
src 是source 源的意思，script和img标签使用
组件：
# day10(Vue)
#### 一、Vue控制style样式(了解)
> Vue通过修改html的style属性值(行内式)控制 css
```html
<div id="app">
<!-- 字典 、对象 、列表 -->
<div :style="{color:mycolor, fontSize:myfontSize}">11111111111</div>
<div :style="myobject1">222222</div>
<!-- style列表 多个对象的引用 -->
<div :style="[myobject1, myobject2]">3333</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
mycolor: 'red',
myfontSize: '60px',
myobject1: {
color: 'blue',
fontSize: '100px'
},
myobject2: {
background: '#ccc'
}
}
})
</script>
```
#### 二、条件渲染
> 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏)
- v-if
> 条件判断使用 v-if 指令
- v-else
> v-else 指令给 v-if 添加一个 "else" 块
- v-else-if
> 用作 v-if 的 else-if 块
- v-show
> 使用v-show 指令显示和隐藏元素，与v-if最大区别在于v-show不删除元素
```html
<div id="app">
<!-- false 表示隐藏（删除 -- 销毁 标签隐藏） -->
<div v-if="bool2">111111111</div>
<!-- if else -->
<div v-if="bool2">v-if</div>
<div v-else>else</div>
<!-- 多重渲染的写法 -->
<div v-if="type == 'A'">A</div>
<div v-else-if="type == 'B'">B</div>
<div v-else>daqiu</div>
<!-- v-show="bool":true显示 false隐藏display：none -->
<div v-show="bool2">v-show</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
bool1: true,
bool2: false,
type: 'D'
}
})
</script>
```
#### 三、列表与对象渲染
> 通过v-for指令可以将一组数据渲染到页面中，数据可以是数组或者对象
>
> 语法格式： v-for= '' data in container"
```html
<div id="app">
<!-- v-for="临时变量 in 列表" -->
<ul>
<li v-for="i in list1">{ { i }}</li>
</ul>
<ul>
<!-- 1:数据；2：下标 -->
<!-- <li v-for="(1, 2) in list"></li> -->
<li v-for="(i, j) in list1">{ {j+1}}、{ {i}}</li>
</ul>
<ul>
<!-- js对象 -->
<!-- i 表示的是value -->
<li v-for="i in dict1">{ { i }}</li>
</ul>
<ul>
<!-- i:表示value，j：key值 -->
<li v-for="(i, j) in dict1">{ {j}}:{ {i}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
// 数组
list1: ['朱毅', '王金泉', '林招亮'],
// 对象
dict1:{'name':'小张','age':30}
}
})
</script>
```
#### 四、绑定表单数据
> **v-model** 指令用于设置表单控件value属性值
>
> 数据双向绑定：当数据发生变化的时候,视图也就发生变化,当视图发生变化时,数据也会跟着同步变化
- **文本输入框、下拉框框架绑定**
```html
<div id="app">
<!-- v-model的值用于设置表单控件value属性值-->
<input type="text" v-model="txt1">
<div>{ {txt1}}</div>
<select v-model="sel1">
<option value="0">北京</option>
<option value="1">上海</option>
<option value="2">广州</option>
</select>
<div>{ {sel1}}</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
txt1: '默认值',
sel1: 0
}
})
</script>
```
- **单选框、复选框数据绑定**
```html
<div id="app">
<div>{ {myradio}}</div>
性别：
<input type="radio" v-model="myradio" value="nan"> 男
<input type="radio" v-model="myradio" value="nv"> 女
<div>{ {list1}}</div>
兴趣爱好：
<input type="checkbox" value="read" v-model="list1"> 读书
<input type="checkbox" value="bahe" v-model="list1"> 拔河
<input type="checkbox" value="lol" v-model="list1"> lol
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
myradio: 'nan',
list1: ['bahe']
}
})
</script>
```
#### **五、Vue生命周期 ** new init del
> 每个Vue实例在被创建到销毁要经过一系列的过程，这整个过程称为Vue实例的生命周期
>
> Vue在生命周期不同的阶段点会自动运行一些函数， 这些函数称为Vue生命周期的钩子函数
- **生命周期钩子函数:**
- #### beforeCreate
> 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
- #### created vue对象 ， list1
> 在实例创建完成后被立即调用
- #### beforeMount
> 在挂载开始之前被调用：相关的 render 函数首次被调用
- #### mounted（最常用）
> 实例挂载到dom之后被调用，可以当成是vue对象的ready方法来使用
- #### beforeUpdate
> 数据发生变化前调用
- #### updated
> 数据发生变化后调用
#### 六、Vue与服务端数据交互
> vue.js没有集成ajax功能，要使用ajax功能，使用vue官方推荐的axios.js库来做ajax的交互
- **axios 使用**
- **引入函数库**
`<script src="js/vue.min.js"></script>`
`<script src="js/axios.min.js"></script>`
- **axios参数**
```html
axios({
//请求方式
method: 'post',
//请求路径
url: '/user/12345',
//请求参数
data: {
name: 'xxx',
pwd: 'yyy'
}
})
//访问成功回调的方法
.then(function(dat){
console.log(dat)
})
//访问失败回调的方法
.catch(function(e){
})
```
- **综合小案例(miniweb)**
```html
<script src="js/vue.min.js"></script>
<script src="js/axios.min.js"></script>
<div class="container" id="container">
<table class="table table-hover">
<tr v-for="i in list1">
<td>{ {i.id}}</td>
<td>{ {i.code}}</td>
<td>{ {i.sname}}</td>
<td>4.40%</td>
<td>全新好</td>
<td>16.05</td>
<td><input type="button" value="添加" name="toAdd"></td>
</tr>
</table>
</div>
<script>
var vm = new Vue({
el: '#container',
data: {
list1: []
},
//vue实例与dom挂载好后，自动回调的方法
mounted: function () {
axios({
url: '/index_data',
method: 'get'
}).then(function (dat) {
console.log(dat.data)
// 数据放到列表list1 dat.data是[] list1重新赋值
// this.list1 = dat.data -- this指向不是对象 窗口对象
// alert(this)
vm.list1 = dat.data
}).catch(function (e) {
// 请求失败
})
}
})
</script>
```
发表评论
最新留言
关于作者
