VUE
VUE 指令集合
- v-model：双向绑定
<div id="app">
{{[name,age]}}
{{age > 17 ? '成年' : '未成年'}}
<input type="text" v-model='name'>
* v-model 双向绑定(根据 input 中所输入的 name，age 来影响上述中的 name，和 age 的判断条件)
* v-model='name' name 是实例中的变量
<textarea v-model='age'></textarea>
</div>
let vm = new Vue({
// el:'#app',
template:'<h1>hello world {{age}}</h1>',
* 不能使用 body 或者 html 作为渲染的模板(VUE 会发出警告);
* 若有 template 属性; 则会把该属性对应的值作为模板；
data:{
* data 中的属性 最终都会挂载到对应的实例上
name:"zhufeng peixun",
age: 9,
}
}).$mount('#app');
* mount 和 el 的作用相同 .$mount('#app')此方式只是挂载在实例后面。
- v-text：展示其对应的文本
- v-once：对应的标签只渲染一次
- v-html：把值中的标签渲染出来
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model='name'/>
<h2 v-text='name' v-once>hello zhufeng</h2>
{{q}};
<div v-html='q'></div>
</div>
let vm = new Vue({
el:'#app',
data:{
name:'珠峰',
q:'<h1>哈哈哈</h1>',
}
});
- v-on：事件绑定
- 事件类型=‘函数’ 或者 @事件类型=‘函数’
<div id="app">
<button @click='fn(name)'>按钮1</button>
<button v-on:click='fn'>按钮2</button>
<button @click='fn(123,name,$event)'>按钮3</button>
<button @click='fn2($event,123,name)'>按钮4</button>
</div>
let vm = new Vue({
el:'#app',
data:{
name:'zhufeng',
},
methods:{
// 函数体的存放位置
// 函数中的 this 统一默认指向实例；
fn(val){
console.log(val);
// console.log(this===vm);
// console.log(this.name);
// console.log(arguments);
},
fn2(e,n,name){
// 事件的事件对象 我们只能通过 $event 传进来；
// 传递参数的位置自定义
console.log(e,n,name);
},
}
})
- v-show=‘布尔’：布尔为 true 显示，false 隐藏。
- 注:v-show 不支持 元素，也不支持 v-else
<div id="app">
<input type="text" xq-model='name'/>
<h1 v-text='name'></h1>
<h2 v-once></h2>
<div v-html='ht'></div>
<button v-on:click='fn'>按钮</button>
<div v-show='bol'>哈哈哈</div>
</div>
let vm = new Vue({
el:'#app',
data:{
name:'珠峰',
ht:'<i>zhufengpeixun</i>',
bol:1,
},
methods:{
fn(){
if(this.bol == 1){
this.bol = 0;
}else{
this.bol = 1;
}
// this.bol = !this.bol;
},
},
})
- v-for：循环显示元素的;可以循环数组，也可以循环对象、数字、字符串
v-for = 'item in ary'- 在哪个标签上，就会自动循环显示哪个标签
- v-for 的时候 最好都加上 key 属性(提高循环性能)；它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用:
- 1、完整地触发组件的生命周期钩子
- 2、触发过渡
<div>
<div v-for='a in ary'>{{a}}</div>
<!--1 2 3 4 5 6 7-->
<h2 v-for='(a,i) in ary'>索引:{{i}};值:{{a}}</h2>
<!--索引:0;值:1
索引:1;值:2
索引:2;值:3
索引:3;值:4
索引:4;值:5
索引:5;值:6
索引:6;值:7 -->
<h3 v-for='i in 5'>{{i}}</h3>
<!--1 2 3 4 5-->
<h4 v-for='(a,index) in "abcdefg"' :key="a+index">索引:{{index}};{{a}}</h4>
<!--索引:0;a
索引:1;b
索引:2;c
索引:3;d
索引:4;e
索引:5;f
索引:6;g-->
<h5 v-for='(q,k,i) in obj'>索引:{{i}};属性名是:{{k}},属性值:{{q}}</h5>
<!--索引:0;属性名是:a,属性值:10
索引:1;属性名是:b,属性值:20
索引:2;属性名是:c,属性值:30-->
</div>
let vm = new Vue({
el:'#app',
data:{
name:"珠峰",
// index:10,
ary:[1,2,3,4,5,6,7],
obj:{
a:10,
b:20,
c:30,
},
},
methods:{
fn(n){
this.index = n;
}
}
})
- v-if vs v-show (true/false)
- v-if：判断指令，是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
- v-else-if：顾名思义，充当 v-if 的“else-if 块”，可以连续使用 限制：前一兄弟元素必须有 v-if ,后面一兄弟元素必须有 v-else。
- v-else：为 v-if 或者 v-else-if 添加“else 块”，限制：前一兄弟元素必须有 v-if 或 v-else-if
- v-show
- 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。- display: none;// 隐藏
- display: block;// 存在
- 另一个用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
- v-if：判断指令，是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
<body>
<div id="app">
<h1 v-if='false'>{{name}}</h1>
<h1 v-show='false'>{{name}}</h1>
</div>
</body>
</html>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
data:{
name:"珠峰"
}
})
</script>
-
v-cloak：防止页面加载时出现 vuejs 的变量名指令，在项目在开发中，经常会遇到当数据加载时vue的一些标签就会闪现，然后等数据加载完后消失，这时候就需要用到 v-cloak 来解决。
-
v-bind：适用于绑定行内属性
- v-bind:value=“item.val”，适用于绑定行内属性 简写成 :value=“item.val”
<div id="app">
<h1>{{name}}</h1>
<select v-model='select'>
<!--<option value="0">HTML</option>-->
<!--<option value="1">CSS</option>-->
<!--<option value="2">JS</option>-->
<!--<option value="3">VUE</option>-->
<option value="" disabled>请您选择</option>
<option v-for='item in ary' v-bind:value="item.val">{{item.text}}</option>
</select>
<h2>{{select}}</h2>
<div class="box" @click='fn'>{{selectText}}</div>
<ul v-show='flag'>
<li v-for='item in ary' @click='choose(item)'>{{item.text}}</li>
</ul>
</div>
let vm = new Vue({
el:'#app',
data:{
name:"珠峰",
select:'',
ary:[
{val:0,text:'html'},
{val:1,text:'css'},
{val:2,text:'js'},
{val:3,text:'vue'},
],
flag:false,
selectText:'',
},
methods:{
fn(){
this.flag = !this.flag;
},
choose(obj){
this.selectText = obj.text;<!--让 div 里面的文本展示出显示的内容-->
this.flag = false;<!--让下拉框隐藏-->
}
}
})
- @keyup.enter：只有按 enter 键才会出发后边的函数
- 按下 enter 键时，获取内容 把内容放到数组中；下边的 li 的展示，用v-for循环数组
<div id="app">
<h1>{{name}}</h1>
<input type="text" v-model='todo' @keyup='fn'>
<input type="text" v-model='todo' @keyup.enter='fn2'>
<ul>
<li v-for='(item,i) in ary'>
{{item}}
<button v-on:click='del(item,i)'>删除{{item}}</button>
</li>
</ul>
</div>
let vm = new Vue({
el:'#app',
data:{
name:"珠峰",
todo:'',
ary:[],
},
methods:{
fn(val){
// console.log(val);
if(val.keyCode === 13){
// 按下回车键
this.ary.push(this.todo);
this.todo = '';
}
},
fn2(){
this.ary.push(this.todo);
this.todo = '';
},
del(item,index){
// 删除的操作
// this.ary.splice(index,1);
this.ary = this.ary.filter((val)=>{
// val 1 2 3 4 5 6
// item 1 (1 2 3 4 5 6)
return item != val
})
}
}
})