<%--
在单向绑定v-bind中只可以改变页面,当内存变量开始改变,页面也会重新渲染
但是在双向绑定v-model中可以改变内存中的变量进而影响页面,只作用于有value值的属性
事件绑定v-on事件名可以是函数也可以是表达式
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>单双向数据绑定</title>
</head>
<body>
<%-- 留坑--%>
<div id="div1"></div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
new Vue({
// el是指向坑的id
el:"#div1",
// template 中要加入反单引号(在tab键上面)
template:
` <div>
单向数据绑定,对应下面的name属性值
<input type='text' v-bind:value="name" v-bind:class="name"></br>
双向数据绑定,对应下面的name值
<input type='text' v-model="name" v-model:class="name"></br>
<button v-on:click='name="改变name"'>事件触发改变name</button></br>
<button v-on:click='change'>函数的形式改变name</button>
</div>`
,
data:function(){
return {
name: 'Hello'
}
}
,
methods:{
change:function(){
this.name="函数改变"
}
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>过滤器</title>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
<input type="text" id="text1" v-model='instring'/></br>
{{instring}}</br>
<%-- instring是指要处理的数据,reversal()是指过滤器函数--%>
{{instring|reversal('局部过滤器翻转:')}}</br>
{{instring|reversal2('全局过滤器翻转:')}}</br>
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
Vue.filter('reversal2',function (val,arg2){
return arg2+val.split('').reverse().join('');
})
new Vue({
el:'#div2',
data(){
return {
instring:''
}
}
,
filters:{
reversal(val,arg2){
return arg2+val.split('').reverse().join('');
}
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>监听器</title>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
<input type="text" id="text2" v-model='msg2'/></br>
<input type="text" id="text1" v-model='msg1.text'/></br>
(<input type="text" v-model='n1'/>+<input type="text" v-model='n2'/>)
<%-- result是函数名,{{函数名}}代表获得函数的返回值--%>
*<input type="text" v-model='n3'/>={{result}}
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
new Vue({
el:'#div2',
data(){
return{
msg2:'',
msg1:{text:''},
n1:'',
n2:'',
n3:''
}
}
,
watch:{
// 这下面的函数函数名msg2要和data中的msg2同名,意思是对msg2这个属性监听
// ,里面的两个参数代表新老数据(也可以不写),只能监听普通数据
msg2(val1,val2){
console.log(val1+'接着'+val2)
if(this.msg2=='love'){
alert(val1);
}
},
// 深度监听,可以监听数组对象等,这里面不能写成函数msg,而是写成属性,函数是handler
msg1:{
handler(newval,oldval){
if(this.msg1.text=='love'){
alert(newval.text);
}
},
deep:true
}
}
,
computed:{
result(){
return (Number(this.n1)+Number(this.n2))*Number(this.n3);
}
}
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>组件三部曲</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
// 声明,在这下面vue中有的属性这里面都可以有
//语法糖
// var myheader={
// template: `<div>我是头部</div>`
// }
var myheader=Vue.extend({
template: `<div>我是头部</div>`
})
var mybody={
template: `<div>我是身体</div>`
}
// 以上的全是局部的组件,现在创建全局的
Vue.component('myfooter',
{template:`<div>我是尾部</div>`})
new Vue({
el:'#div2',
data(){
return{
}
}
,
// 注册
components:{
myheader,
mybody
}
,
template:
// 使用
`<div>
<myheader></myheader>
<mybody></mybody>
<myfooter></myfooter>
</div>`
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>slot</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
/*子组件要在父组件上面,不然无法注册*/
var child ={
template:`<div>我是子组件</div>`,
data(){
return {
msg:"Hello子组件",
}
}
,
created(){
console.log(this.$parent)
}
}
// 在div中slot可以显示内容,当slot中name属性不写时,就是在parent组件下的所有的子标签的所有内容
//但是在一旦出现name标签时会一一对应
var parent ={
template:`<div>我是父组件</br>
<slot></slot>
<slot name='Hello'></slot>
<child ref="op"></child>
</div>`,
// 在父组件中对子组件注册
components: {
child,
},
data(){
return{
msgp:"Hello父组件"
}
},
mounted(){
console.log(this.$refs.op)
}
}
new Vue({
el:'#div2'
,
data(){
return {
}
}
,
// 对父标签注册
components:{
parent,
},
template:
`<div>
<parent>
<div>我是插槽内容</div>
<div>我是插槽内容2</div>
<div slot='Hello'>我是插槽内容3</div>
<div>我是插槽内容4</div>
</parent>
</div>`
})
</script>
</body>
</html>
<%--
Created by IntelliJ IDEA.
User: hp
Date: 2021/6/16
Time: 14:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>子传父</title>
<%-- 声明注册使用--%>
</head>
<body>
<%-- 留坑--%>
<div id="div1">
<div id="div2">
</div>
</div>
<%--导包--%>
<script type="text/javascript" src="js/vue.js"></script>
<%-- 实例化--%>
<script type="text/javascript">
//子传给父
/*1、在这里面是通过事件sendParent触发emit*/
var child2 ={
template:`<button @click='sendParent'>改变父标签的内容</button>`,
methods:{
sendParent(){
this.$emit("parent","改变你咋的")
}
}
}
/*2、在子组件触发后父组件通过子组件child2用emit的key等于函数名,用这个函数来做出接收信息*/
var parent2={
template:`<div >
父组件:{{msg}}
<child2 @parent='reserve'></child2>
</div>`,
components: {
child2
},
data(){
return{
msg:'有本事改变我呀'
}
},
methods: {
reserve(val){
this.msg=val;
}
}
}
new Vue({
el:'#div2'
,
// 对父标签注册
components:{
parent2,
},
template:
`
<parent2></parent2>`
})
</script>
</body>
</html>