Vue
Vue 的使用
script中
1、创建vue实例与页面标签进行绑定,该实例就可以控制该标签机内部所有标签
new Vue({
// 2、挂载点:与页面标签绑定的关键,具有唯一性
el: '#app',
// 3、vue中要使用的数据
data: {
msg: 'h1标签',
info: '',
message: ''
},
// 4、methods控制所有事件
methods: {
action: function () {
this.msg = 'h1被点击了';
this.info = 'h1被点击了';
this.message = 'h1被点击了';
}
}
})
body中
<div id="app">
<h1 @click="action">{{ msg }}</h1>
<h2>{{ info }}</h2>
<h2>{{ message }}</h2>
</div>
Vue页面取消闪烁(v-cloak)
标签中
<div id="app" v-cloak>
css中属性选择器
[v-cloak] {
display: none;
}
插入值表达式
<!--1、插值表达式:在内部直接写变量或变量表达式-->
<p>{{ msg }}</p>
<p>{{ (num + 1 - 3) / 2 }}</p>
三个插入文本指令
<!--2、v-text v-html v-once 三个文本指令 -->
<!--v-text:纯文本-->
<p v-text="msg"></p>
<!--v-html:可以解析标签-->
<p v-html="'<b>加粗文本</b>'"></p>
<p v-html="htmlMSG" @click="changeMsg"></p>
<!--v-once:插值表达式渲染文本,once来限制文本不可修改-->
<!--插值表达式中一个变量被限制,整个结果都被限制-->
<p v-once="htmlMSG">{{ htmlMSG + msg }}</p>
点击事件v-on:click/@click
鼠标事件的对象:直接写函数名,默认将鼠标事件对象传入、
鼠标事件的对象:一旦添加(),就必须手动传参,$event就代表鼠标事件对象
$event:自动传入ev事件
<!-- v-on指令: 1)明确事件名 2)明确事件函数 v-on:事件名="事件函数" -->
<!--1、基础的事件绑定-->
<p v-on:click="clickAction">单击</p>
<p v-on:dblclick="dblclickAction">双击</p>
<!--2、绑定事件并传参-->
<ul>
<li v-on:click="liAction(0)">{{ li1 }}</li>
<li v-on:click="liAction(1)">222</li>
<li v-on:click="liAction(2)">333</li>
</ul>
<!--3、传递事件对象-->
<p v-on:click="sysAction1">不传自定义参数</p>
<p v-on:click="sysAction2(888, $event)">传自定义参数</p>
<!--4、v-on: 可以简写为 @ -->
<p @click="clickAction">单击</p>
属性事件v-bind
<!-- v-bind属性指令 :属性名="属性变量",v-bind: 可以简写为: -->
<!--eg: v-bind:class='myClass' | v-bind:style='myStyle' | v-bind:aaa='myAAA' -->
<div class="box" v-bind:style="myStyle" @click="changeColor('pink')"></div>
<!--1、操作单个样式:w变量的值就是为属性宽提供数据的-->
<div class="box" v-bind:style="{'width': w}" @click="changeWidth"></div>
<!--2、操作多个样式: more_style是一个对象变量,可以赋值多个key:value样式-->
<div class="box" v-bind:style="more_style" @click="changeStyle"></div>
<!--3、v-bind: 可以简写为 :,可以绑定所有系统和自定义属性,属性一旦绑定,后方就是变量 -->
<div :aaa="AAA">简写v-bind</div>
<!--4、操作单个类名-->
<!--直接赋值:c1就是变量,变量的值就是类名-->
<div :class="c1" @click="changeClass"></div>
<!--布尔切换:该div有一个kiss类名,kiss_able的true或false决定kiss是否生效-->
<div :class="{kiss: kiss_able}"></div>
<!--5、操作多个类名: [变量1, ..., 变量n] 每个变量的值都是该标签的类名 -->
<div :class="[x, y, {z: is_z}]"></div>
表单事件v-model
<!-- v-model 表单指令 v-model="变量" 变量给value属性提供值 -->
<!--1、数据的双向绑定-->
<input type="text" v-model="val">
<input type="text" v-model="val">
<p>{{ val }}</p>
<form action="">
<!--2、普通输入框: 直接绑定变量即可 -->
<input type="password" v-model="val">
<!--3、单选框-->
<!--radio_val的值是多个单选框中一个的value值,代表该单选框默认选中-->
<p>
<label for="male">男</label>
<input id="male" type="radio" value="male" v-model="radio_val" name="sex">
<label for="female">女</label>
<input id="female" type="radio" value="female" v-model="radio_val" name="sex">
<button @click="alertValue">单选框提交给后台的value</button>
<span>{{ radio_val + '被选中' }}</span>
</p>
<!--4、独立使用的复选框 -->
<!--sure_val的值为true|false,决定该单个复选框是否选中-->
<p>
<input type="checkbox" name="sure" value="同意" v-model="sure_val">
<span>{{ sure_val }}</span>
</p>
request.GET.get('sure', None)
<!--5、复选框-->
<!--hobby_val的值是数组,里面用来存放复选框所有选项的值,值存在代表该选框选中-->
<p>
男<input type="checkbox" value="male" name="hobby" v-model="hobby_val">
女<input type="checkbox" value="female" name="hobby" v-model="hobby_val">
哇塞<input type="checkbox" value="?" name="hobby" v-model="hobby_val">
<span>{{ hobby_val }}</span>
</p>
<p>
<input type="submit">
</p>
</form>
条件指令
v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示
<!-- v-if | v-show 条件指令: v-if="变量" | v-show="变量" -->
# <!--1、v-if | v-show比较:两者绑定的变量值都是 true|false-->
<p>
<button @click="toggleAction(true)">显示</button>
<button @click="toggleAction(false)">隐藏</button>
</p>
#<!--v-if在隐藏时,不被渲染 | v-show在隐藏时,采用display: none存在-->
<div class="box b1" v-if="is_show"></div>
<div class="box b2" v-show="is_show"></div>
<!--2、v-if、v-else-if、v-else 分支家族 -->
<p>
<button @click="toggleShow('red')">红</button>
<button @click="toggleShow('blue')">蓝</button>
<button @click="toggleShow('green')">绿</button>
</p>
<div class="box r" v-if="color == 'red'"></div>
<div class="box b" v-else-if="color == 'blue'"></div>
<div class="box g" v-else></div>
循环指令v-for
<!-- v-for 循环指令: v-for="ele in 容器变量" -->
<!--1、array的循环-->
<ul>
<li v-for="s in arr">{{ s }}</li>
</ul>
<hr>
<!--key属性是vue的属性,表示为改标签在内存中建立缓存的依据-->
<ul>
<li v-for="(s, i) in arr" :key="s" b="b">第{{ i }}个:{{ s }}</li>
</ul>
<hr>
<!--2、对象的循环-->
<ul>
<li v-for="v in person">{{ v }}</li>
</ul>
<hr>
<ul>
<li v-for="(v, k) in person">{{ k }}:{{ v }}</li>
</ul>
<hr>
<ul>
<li v-for="(v, k, i) in person">{{ k }}:{{ v }}:{{ i }}</li>
</ul>
<hr>
<!--name: * | sex:*-->
<!--name: * | sex:*-->
<!--name: * | sex:*-->
<p v-for="stu in stus">
<span v-for="(v, k, i) in stu">
<b v-if="i != 0"> | </b>
<b>{{ k }}:{{ v }}</b>
</span>
</p>
</div>
</body>
<script src="js/vue.js"></script>
new Vue({
el: '#app',
data: {
arr: ['aaa', 'bbb', 'ccc'],
person: {
'name': 'Bob',
'age': 18,
'sex': '男'
},
stus: [
{
'name': 'Alex',
'sex': '哇塞'
},
{
'name': 'Egon',
'sex': '哇哦'
},
{
'name': 'Jason',
'sex': '我去'
}
]
}
})
tudulist留言案例
html
<input type="text" v-model="msg_val">
<button @click="sendMsg">留言</button>
<ul>
<li v-for="(msg, i) in msgs" @click="deleteMsg(i)">{{ msg }}</li>
</ul>
script
new Vue({
el: '#app',
data: {
// msgs: ['第一条留言', '第二条留言'],
msgs: localStorage.msgs ? localStorage.msgs.split(',') : [],
msg_val: '',
},
methods: {
sendMsg () {
// 1)数据为空直接结束
if (!this.msg_val) return;
// 2)数据添加到留言数组中
// this.msgs.push(this.msg_val); // 尾增
this.msgs.unshift(this.msg_val); // 首增
// 数据同步到前台数据库
localStorage.msgs = this.msgs;
// 3)清空输入框
this.msg_val = '';
},
deleteMsg (index) {
// console.log(index);
this.msgs.splice(index, 1);
// 数据同步到前台数据库
localStorage.msgs = this.msgs;
}
}
})
浏览器存储数据
// window.localStorage // 永久存储仓库
// window.sessionStorage // 临时存储仓库
// 存,存完注释
// localStorage['name'] = 'Owen'
// 取
console.log(localStorage.name);
// 存,存完注释
// sessionStorage.age = 18;
// 取
console.log(['age']);
// localStorage.msgs = []
// 清空
localStorage.clear();
localStorage.clear();
// localStorage.arr = [1, 2, 3];
// localStorage.obj = {'1': 1};
符合冲突delimiters
<p>{{ msg }}</p>
<p>{[ msg ]}</p>
<p>${ msg }</p>
new Vue({
el: '#app',
data: {
msg: '信息'
},
// delimiters: ['{[', ']}'],
delimiters: ['${', '}'],
})
计算属性computed
computed: {
val_fn () {
// this.a_val;
// this.b_val;
// this.c_val;
console.log('该方法被调用了');
return this.a_val + this.b_val + this.c_val;
}
}
watch属性监控
// watch内部书写方法 - 管理 监听绑定的属性(提前要存在) 的方法
// 1)方法名 被监听的变量名(属性)
// 2) 在方法名被渲染后,方法名代表的属性值改变,绑定的方法就会被调用
// 3)watch用来解决多个变量值依赖一个变量值
watch: {
full_name () {
console.log('被调用了');
// full_name变量值改变,要完成的任何逻辑都可以书写在此方法中
let name = this.full_name.split(' ');
this.last_name = name[0];
this.first_name = name[1];
}
}