Vue的学习总结-day02
一、Vue的基本语法
1、Vue.js 使用双大括号 {{ }} 来表示文本插值：
<template>
<div class="demo">
{{msg}}
</div>
</template>
2、指令
v-bind：动态绑定一个或多个特性，或一个组件 prop。
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
</div>
代码：
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
}
},
};
</script>
访问页面：就会显示该图片
v-if / v-else-if / v-else: 条件渲染。
代码：
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
<p v-if="visible">这是if语句</p>
<p v-else>此时不展示if语句</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
visible: true
}
},
};
</script>
v-for: 列表渲染。
代码：
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
<p v-if="visible">这是if语句</p>
<p v-else>此时不展示if语句</p>
<p v-for="item in items">{{item.name}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
visible: true,
items:[
{
id:1,
name: "java"
},
{
id:2,
name: "python"
},
{
id:3,
name: "c++"
}
]
}
},
};
</script>
v-on: 事件监听器。
代码：
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
<p v-if="visible">这是if语句</p>
<p v-else>此时不展示if语句</p>
<p v-for="item in items">{{item.name}}</p>
<p>这是监听的值: {{number}}</p>
<button v-on:click="number++">点我加1</button>
<button v-on:click="number--">点我减1</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
visible: true,
number:1,
items:[
{
id:1,
name: "java"
},
{
id:2,
name: "python"
},
{
id:3,
name: "c++"
}
]
}
},
};
</script>
v-model 指令来实现表单元素（如 <input>）和组件数据之间的双向绑定
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
<p v-if="visible">这是if语句</p>
<p v-else>此时不展示if语句</p>
<p v-for="item in items">{{item.name}}</p>
<p>这是监听的值: {{number}}</p>
<button v-on:click="number++">点我加1</button>
<button v-on:click="number--">点我减1</button><br>
<input v-model="message" placeholder="请输入文本">
<p>你输入了：{{message}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
visible: true,
number:1,
message:'',
items:[
{
id:1,
name: "java"
},
{
id:2,
name: "python"
},
{
id:3,
name: "c++"
}
]
}
},
};
</script>
展示的文字就随着你的输入改变而改变
计算属性：
computeAmount 是一个计算属性，基于 number 计算。当 number 改变时，computeAmount 会自动更新，而不需要手动触发视图更新。点击上面的“点我加1”可以试一试。
代码：
<template>
<div class="demo">
{{msg}}
<img v-bind:src="iconUrl">
<p v-if="visible">这是if语句</p>
<p v-else>此时不展示if语句</p>
<p v-for="item in items">{{item.name}}</p>
<p>这是监听的值: {{number}}</p>
<button v-on:click="number++">点我加1</button>
<button v-on:click="number--">点我减1</button><br>
<input v-model="message" placeholder="请输入文本">
<p>你输入了：{{message}}</p>
<p>原始数据： {{number}}</p>
<p>计算后的数据数据： {{computeAmount}}</p>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Vue学习-第二天',
iconUrl: 'https://img0.baidu.com/it/u=4224216114,543718935&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800',
visible: true,
number:1,
message:'',
items:[
{
id:1,
name: "java"
},
{
id:2,
name: "python"
},
{
id:3,
name: "c++"
}
]
}
},
computed:{
computeAmount(){
return this.number * 0.5;
}
}
};
</script>
