1.条件指令
<div id="app">
<p v-if="r1" key="p_r1">if条件</p>
<p v-show="r2">show条件</p>
<!--{{ num + 1 - 5 * 2 + '好的' }}-->
<ul>
<!--v-else会默认与v-if等有条件的分支绑定-->
<!--v-else-if必须由条件才和有条件v-if分支绑定-->
<li v-if="tag == 1">111</li>
<li v-else-if="tag == 2">222</li>
<li v-else>333</li>
</ul>
<ul>
<li @click="action('a')">a</li>
<li @click="action('b')">b</li>
<li @click="action('c')">c</li>
</ul>
<ul>
<li v-show="flag == 'a'">aaa</li>
<li v-show="flag == 'b'">bbb</li>
<li v-show="flag == 'c'">ccc</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
num: 10,
r1: false,
r2: false,
tag: 2,
flag: 'a'
},
methods: {
action: function (s) {
this.flag = s //实现点击事件切换显示的数值
}
}
})
</script>
2、循环指令
<div id="app">
<p>{{ nums[2] }}</p>
<ul>
<!-- 只遍历值 -->
<li v-for="num in nums">{{ num }}</li>
</ul>
<ul>
<!-- 值与索引 -->
<li v-for="(num, index) in nums">{{ num }} {{ index }}</li>
</ul>
<ul>
<!-- 值，键，索引 -->
<li v-for="(v, k, i) in people">{{ v }} {{ k }} {{ i }}</li> // 成行打印
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
nums: [5, 3, 2, 1, 4],
people: {
'name': 'Owen',
'age': 17.5,
'gender': 'others'
}
}
})
</script>
3、Vue里的splice的用法
splice(start: number, deleteCount: number, ...items: T[]): T[];
eg1:
k = [1,2,3,4,5]
k.splice(0,0,11，22) # 从索引为0的位置，操作0位，将其元素改变为括号内第三个元素及其后的元素 结果如下：
k=[11, 22, 1, 2, 3, 4, 5]
eg2：
k = [1,2,3,4,5]
k.splice(1,2,22,33)
结果如下：
k = [1,22,33,4,5]
4、评论案例 通过ajax拿到值，应该可以更好的处理评论楼的样式
<style>
span {
margin-left: 100px;
cursor: pointer; // 改变光标的类型，效果明显
color: green;
}
span:hover {
color: red;
}
</style>
<div id="app">
<p>
<input type="text" v-model="val">
<button @click="add">评论</button>
</p>
<ul>
<li v-for="(info, i) in infos">
{{ info }}
<span @click="del(i)">x</span>
</li>
</ul>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
infos: [], // 管理所有留言
val: '' // 管理当前留言
},
methods: {
add: function () {
let val = this.val;
if (val) {
this.infos.splice(0, 0, val); // 留言
this.val = '' // 输入框置空
}
},
del: function (i) {
// splice: 从哪个索引开始 操作的位数 操作成的结果(可变长)
this.infos.splice(i, 1) // 删除留言
}
}
})
</script>
5、实例成员之computed
<div id="app">
<p>
姓：<input type="text" v-model="first_name">
名：<input type="text" v-model="last_name">
</p>
<p>
姓名：<b>{{ full_name }}</b>
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
first_name: '',
last_name: '',
},
computed: {
// 1.在computed中定义的变量的值等于绑定的函数的返回值
// 2.绑定的函数中出现的所有vue变量都会被监听
full_name: function () {
console.log('被调用了'); //输入框内的数值只要改变，就会打印该字符串
return this.first_name + this.last_name;
}
}
})
</script>
6、实际例成员之watch
<div id="app">
<p>
姓名：<input type="text" v-model="full_name">
</p>
<p>
姓：<b>{{ first_name }}</b>
名：<b>{{ last_name }}</b>
</p>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
full_name: '',
first_name: '',
last_name: ''
},
watch: {
// 1.后方绑定的函数就是监听前方的变量，变量值改变，函数被调用
full_name: function () {
let res = this.full_name.split('');
this.first_name = res[0];
this.last_name = res[1];
}
}
})
7、解决插值表达式符号冲突
<div id="app">
${ msg } // 设置完后，其值为 ‘12345’
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
msg: '12345'
},
delimiters: ['${', '}'] // 设置完后，可以利用该方式在vue里使用
})
</script>
总结：
指令：
文本：{{}} v-text v-html v-once
属性：v-bind:href | :href :class='c1' :class='[c1, c2]' :style='s1'
（s1={color: "red"}）
事件：v-on:click | @click @click="action" @click="action(msg)" @click="action($event)"
表单：v-model
条件：v-show v-if v-else-if v-else
循环：v-for="(value, index) in list" v-for="(value, key, index) in dict"
成员:
el：挂载点
data：数据
methods：方法
computed：计算 -- 监听方法内所有的变量，返回值给绑定的变量，该变量无需在data中声明
watch：监听 -- 监听绑定的变量，绑定的变量必须在data中声明
8、组件
组件：有html模板，有css样式，有js逻辑的集合体
每一个组件都是一个vue实例
每个组件均具有自身的模板template，根组件的模板就是挂载点，子组件必须自己定义template(局部子组件、全局子组件
每个组件模板只能且必须拥有一个根标签
子组件的数据具有作用域，以达到组件的复用
9、根组件
<div id="app">
<h1>{{ msg }}</h1>
</div>
<script type="text/javascript">
// 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
// 每个组件组件均拥有模板,template
var app = new Vue({
// 根组件的模板就是挂载点
el: "#app",
data : {
msg: "根组件"
},
// 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
// 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
template: "<div>显式模板</div>"
})
// app.$template
</script>
10、局部组件
<div id="app">
<!--div.box>h1{标题}+(p.p${文本内容}*2)--> // 生成标签的快捷方式
<abc></abc> // 两个局部组件，数据并不同步
<abc></abc>
</div>
<script src="js/vue.js"></script>
<script>
// 定义局部组件
let localTag = {
// 1.data要达到组件的复用，必须为每个组件提供一个名称空间(作用域)
// 2.data的值就是一个存放数据的字典
// 需要满足1和2，data值为一个可以产生名称空间的函数的返回值，返回值是字典
data: function () {
return {
count: 0,
// r: ''
}
},
template: `
<div class="box" style="border: solid; width: 100px">
<h1>标题</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
<button @click="send">提交</button>
</div>
`,
methods: {
action: function () {
this.count++
},
// 结合JQ完成组件与后台的交互
// send: function () {
// $.ajax({
// url:,
// type:,
// data:，
// success: function (result) {
// this.r = result
// }
// })
// },
// watch: {
// r: function () {
//
// }
// }
}
};
new Vue({
el: '#app',
data: {
},
// 局部组件必须注册
components: {
'abc': localTag
}
})
</script>
11、全局组件
<div id="app">
<!--在标签中建议使用 - 语法命名，对应js中就是驼峰命名-->
<old-boy></old-boy>
</div>
<script src="js/vue.js"></script>
<script>
// Vue.component(组件名, {组件主体});
Vue.component('oldBoy', {
data: function () {
return {
count: 0
}
},
template: `
<div class="box" style="border: solid; width: 100px">
<h1>全局</h1>
<p class="p1">文本内容</p>
<p @click="action" class="p2" style="background: yellowgreen">被点击了{{ count }}下</p>
</div>
`,
methods: {
action: function () {
this.count++
},
}
});
// 全局组件无需注册
new Vue({
el: '#app',
data: {
}
})
</script>
12、组件间的交互：父传子
<div id="app">
<!-- local-tag就可以理解为自定义标签，msg变量值由父组件提供 -->
<!-- local-tag标签代表的是子组件，owen为标签的自定义属性 -->
<!-- 在子组件内部能拿到owen，就可以拿到父组件的信息 -->
<local-tag :owen="msg"></local-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let localTag = {
// 子组件拿到父级自定义属性
props: ['owen'],
template: `
<div>
<h1>信息</h1>
<p>{{ owen }}</p>
</div>
`
};
new Vue({
el: '#app',
data: {
msg: '父级的信息'
},
components: {
// 'localTag': localTag, 当二者同名时，可以简写
// localTag: localTag,
localTag // 在页面中 <local-tag>
}
})
</script>
13、 组件间的交互：子传父
通过发送事件请求的方式进行数据传递
<div id="app">
<h1>{{ title }}</h1>
<global-tag @recv="get_title"></global-tag>
</div>
</body>
<script src="js/vue.js"></script>
<script>
Vue.component('global-tag', {
template: `
<div>
<input type="text" v-model="msg">
<!--<button @click="action">修改标题</button>-->
</div>
`,
data: function () {
return {
msg: ''
}
},
methods: { // 这种更原始
// action: function () {
// let msg = this.msg;
// // recv是自定义的事件
// this.$emit('recv', msg)
// $emit 触发父级自定义事件 ，将值传给这个事件
// }
},
watch: { //这种更简单
msg: function () { // 只要msg只有变化，就将值同步给父组件
this.$emit('recv', this.msg)
}
}
});
new Vue({
el: '#app',
data: {
title: '父组件定义的标题'
},
methods: {
get_title: function (msg) {
this.title = msg
}
}
})
</script>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
