第七节：Vue数据选项
文章目录
目录
Vue结合jquery使用
watch动态监听检测数据变化
computed渲染前数据处理
propsData传值 父传子收
$emit传递参数 子传父收
v-model表单渲染
1、vue结合jQuery使用
使用jquery的时候，需要引用进来。将jquery挂载到 Vue上
语法：
Vue.prototype.$ = $;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<h2> {{about}} </h2>
<div>
<span>{{user.name}}</span>
<span>{{user.age}}</span>
<span>{{user.remark}}</span>
</div>
<ul>
<li v-for="items in tools">{{items}}</li>
</ul>
</div>
</template>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
Vue.prototype.$ = $;
new Vue({
el: '#app',
data: {
about: 'vue结合jQuery使用',
user: {
name: "xiaoge",
age: 28,
remark: "你还没有对象呢"
},
tools: []
},
created () {
// 输出 $ jquery
console.log(this.$)
// jquery get 提交使用
this.$.get('http://jsonplaceholder.typicode.com/todos?_limit=30')
.then(res => {
console.log(res)
this.tools = res
})
}
})
</script>
</body>
</html>
2、watch 动态监听数据变化
watch监听检测数据 ；监听检测数据，一般用于计算属性。语法：
watch:{ count(new1,old){ } }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{about}}</h1>
<h2>{{ count }}</h2>
<button @click='add'>add</button>
<button @click='reduce'>reduce</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
about: 'watch:侦听检测数据,侦听属性变化',
count: 0
},
methods: {
add () {
this.count++
},
reduce () {
this.count--
}
},
// 监听检测数据，一般用于计算属性
watch: {
about (newData, oldData) {
console.log(newData, oldData)
},
count (newCount, oldCount) {
console.log(newCount, oldCount)
if (newCount < 0) {
this.count = 0
}
}
}
})
</script>
</body>
</html>
3、computed渲染前处理数据
computed数据处理，在渲染之前处理数据，然后渲染。语法：
<span>{{res}}<span> // 调用数据处理 computed: { res () {return this.res} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{about}}</h1>
<h2>{{ count }}</h2>
<p>{{ res }}</p>
<button @click='add'>add</button>
<button @click='reduce'>reduce</button>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
//computed : 侦听处理数据，一般用于计算属性；
let vm = new Vue({
el: '#app',
data: {
about: 'computed 处理数据',
count: 0,
reverse: "123456789"
},
methods: {
add () {
this.count++
},
reduce () {
this.count--
}
},
watch: {
count (newCount, oldCount) {
console.log(newCount, oldCount)
if (newCount < 0) {
this.count = 0
}
},
},
computed: {
res () {
if (this.reverse == '123456789') {
return this.reverse
} else {
return this.reverse.split("").reverse().join("")
}
}
}
})
</script>
</body>
</html>
4、propsData、$emit 传值
props、$emit主要用于组件、模板之间传递参数，props传递参数主要是父模板传递参数，子模板接受参数，$emit 传递参数恰巧相反，子模板传递参数，父模板中对应函数接受参数。
props: :des-name=‘“这是父传出的参数”’
props:[desName] // {{desName}} 等于“这是父传出的参数”
$emit: v-on:increment=“模板接受子模板参数函数”
子模板参数返回
this.$emit('increment',参数)
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<!--html给子组件传值-->
<div id='app'>
<!-- app有自己的data -->
<h1>{{title}}</h1>
<div>{{about}}</div>
<p>{{childemit}}</p>
<hr>
<!-- h-nav也有自己的data -->
<h-nav :title='"这里是子组件"' :des-name='param' v-on:increment="childdataparent"></h-nav>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
/* 父子组件通讯（传值）：父组件向子组件传值，子组件接受值，实现组件与组件之间进行通讯（非父子组件通讯）
组件的形成：html + css + js */
let vm = new Vue({
el: '#app',
data: {
about: '父组件向子组件传值，子组件接受值，实现组件与组件之间进行通讯',
title: '这里是父组件的标题',
param: '这里是父模板传递到子模板的参数',
childemit: 1
},
methods: {
childdataparent: function (value) {
this.childemit = value
}
},
components: {
hNav: {
data () {
return {
ablout: '这里是子组件的标题',
childemit: "这个是子模板传递给父模板的参数"
}
},
template: `<div>
<h2>{{ablout}}</h2>
<div>{{title}} </div>
<div>{{desName}} </div>
<hr>
<button v-on:click="childemitparent">{{childemit}}</button>
</div>`,
methods: {
childemitparent: function () {
this.$emit('increment', this.childemit)
}
},
//接收父组件传达过来的值。
props: ['title', 'desName'],
},
}
})
</script>
</body>
</html>
5、v-model 表单渲染
v-model双向数据绑定 相互渲染的一个表单指令
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1 v-text="des"></h1>
<!-- 双向数据绑定 -->
<input type="text" v-model="userName" placeholder="请编辑我。。。。">
<h2>姓名： {{userName}} </h2>
<hr>
<!-- 单选框 -->
<input type="radio" id='radioSex1' name="user" value='男' v-model="userSex">
<label for='radioSex1'> 男 </label>
<input type="radio" id='radioSex2' name="user" value='女' v-model="userSex">
<label for='radioSex2'> 女 </label>
<br />
<span> 性别：{{userSex}} </span>
<hr>
<!-- 下拉列表 -->
<select name="age" id="age" v-model="age">
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
</select>
<br />
<span> 年龄：{{age}} </span>
<br />
<hr>
<!-- 复选框 -->
<p> 单个复选框 </p>
<input type="checkbox" id='checkbox' v-model="check" />
<label for='checkbox'> 是否选中：{{check}} </label>
<hr>
<!-- 多个复选框 -->
<p> 多个复选框 </p>
<input id="checkCompany1" name="checkCompany" type="checkbox" value='大华' v-model="checkCompany" />
<label for='checkCompany1'> 大华 </label>
<input id="checkCompany2" name="checkCompany" type="checkbox" value='海康' v-model="checkCompany" />
<label for='checkCompany2'> 海康 </label>
<input id="checkCompany3" name="checkCompany" type="checkbox" value='华为' v-model="checkCompany" />
<label for='checkCompany3'> 华为 </label>
<input id="checkCompany4" name="checkCompany" type="checkbox" value='VIVO' v-model="checkCompany" />
<label for='checkCompany4'> VIVO </label>
<input id="checkCompany5" name="checkCompany" type="checkbox" value='阿里' v-model="checkCompany" />
<label for='checkCompany5'> 阿里 </label>
<br />
<span> 中标公司：{{checkCompany}} </span>
<hr>
<!-- 绑定文本域 textarea -->
<p> 绑定文本域 textarea </p>
<textarea v-model="remark"></textarea>
<h2>备注：{{remark}}</h2>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data () {
return {
des: '表单元素',
userName: '张三',
userSex: '男',
age: 18,
check: false,
checkCompany: ['阿里'],
remark: ""
}
}
})
// 表单事件
</script>
</body>
</html>
346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
