网站开发建设须知seo技术培训学校
一、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>
