目录
一、插值操作
1.Mustache语法
mustache是胡须的意思,因为{
{}}
像胡须,又叫大括号语法。
在vue对象挂载的dom元素中,{
{}}
不仅可以直接写变量,还可以写简单表达式。
<body>
<div id="app">
<h2>{
{message}}</h2>
<h2>{
{message}},world</h2>
<!-- Mustache的语法不仅可以直接写变量,还可以写简单表达式 -->
<h2>{
{firstName+'-'+lastName}}</h2>
<h2>{
{firstName}}-{
{lastName}}</h2>
<h2>{
{firstName+lastName}}</h2>
<h2>{
{count*2}}</h2>
</div>
<script>
Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
const vm = new Vue({
el: '#app',
data(){
return{
message: 'hello',
firstName:'zhang',
lastName:'san',
count:2
}
}
})
</script>
</body>
2. vue列表的展示(v-for)
开发中常用的数组有许多数据,需要全部展示或者部分展示,在原生JS中需要使用for循环遍历依次替换div元素,在vue中,使用v-for
可以简单遍历生成元素节点。
<div id='app'>
<!-- <h2>{
{todolists}}</h2> -->
v-for="数组或对象中的每一个值 in/of 数组或对象本身"
<!-- <h2 v-for="item in todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of todolists">{
{item}}</h2> -->
<!-- <h2 v-for="item of obj">{
{item}}</h2> -->
<!-- <h2 v-for="item in obj">{
{item}}</h2> -->
<h2 v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- <h2 v-for="item in obj2">{
{item.a}}{
{item.b}}{
{item.c}}</h2> -->
<ul>
<li v-for="item of obj2">{
{item.a}}{
{item.b}}{
{item.c}}</li>
</ul>
<!-- 添加索引值 动态绑定key值,涉及diff算法 可以为index、id,
在将来的项目中写v-for是需要加上:key 它的值可以写索引,最好写数据中的id值-->
<h2 v-for="(item,index) in todolists" :key="index">{
{item}}--{
{index}}</h2>
<h2 v-for="item in obj2" :key="item.id">{
{item.a}}{
{item.b}}{
{item.c}}</h2>
<!-- diff算法 -->
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el: '#app',
data() {
return {
todolists: ['篮球', '排球', '羽毛球', '足球'],
obj: {
a: '张三',
b: '李四',
c: '王五'
},
obj2: [{
id:1,
a: '张三'
}, {
id:2,
b: '李四'
}, {
id:3,
c: '王五'
}]
}
}
})
</script>
item表示当前遍历的元素,index表示元素索引, 为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key
属性。建议尽可能在使用 v-for
时提供 key
attribute,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。
因为它是 Vue 识别节点的一个通用机制,key
并不仅与 v-for
特别关联。
不要使用对象或数组之类的非基本类型值作为
v-for
的key
。请用字符串或数值类型的值。
3. vue案例-计数器
使用vue实现一个小计数器,点击
+
按钮,计数器+1,使用-
按钮计数器-1。
定义vue对象并初始化一个变量count=0
定义两个方法
add
和sub
,用于对count++或者count--定义两个button对象,给button添加上点击事件
在vue对象中使用methods表示方法集合,使用
v-on:click
的关键字给元素绑定监听点击事件,给按钮分别绑定上点击事件,并绑定触发事件后回调函数add
和sub
。也可以在回调方法中直接使用表达式。例如:count