Vue的基础学习
Posted 玉思盈蝶
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的基础学习相关的知识，希望对你有一定的参考价值。
一.Vue的计算属性：get和set属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的计算属性</title> </head> <body> <div id="app"> <p>初始值：{{name}}</p> <!-- 字符串的反转 gnep is--> <p> 反转字符串：{{name.split(\'\').reverse().join(\'\')}} </p> <p>函数调用：{{this.reverseStr()}}</p> <p>计算属性get调用：{{reverse}}</p> <button @click="deal()">调用计算属性的set方法</button> </div> <script src="js/vue.js"></script> <script> // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, methods: { reverseStr() { return this.name.split(\'\').reverse().join(\'\') }, // set方法 deal() { this.name = "si---si"; // 调用setter方法 } }, // 计算属性 computed: { // get方法 reverse() { return this.name.split(\'\').reverse().join(\'\') } }, name: { get() { return this.name.split(\'\').reverse().join(\'\') }, // set方法 set(str) { // alert(0); this.name = str; } } }); </script> </body> </html>
二.Vue的全局组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的全局组件</title> </head> <body> <div id="app"> <!-- 3.调用全局组件 --> <my-date></my-date> <my-date></my-date> </div> <div id="app1"> <!-- 3.调用全局组件 --> <my-date></my-date> <my-date></my-date> </div> <script src="js/vue.js"></script> <script> // 1.创建组件构造器 let profile = Vue.extend({ // 1.1模版选项 template:` <div> <input type=\'date\'> <p>今天已经是冬天了</p> </div> ` }); // 2.注册全局的组件 Vue.component(\'my-date\', profile); // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, }); let vm1 = new Vue({ el: \'#app1\', data: { name: \'si peng\' }, }); </script> </body> </html>
三.Vue的局部组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的局部组件</title> </head> <body> <div id="app"> <my-date></my-date> <my-color></my-color> </div> <!-- 这里调用不到的，会报错 --> <div id="app1"> <my-date></my-date> <my-color></my-color> </div> <script src="js/vue.js"></script> <script> // 1.创建组件构造器 let profile = Vue.extend({ // 1.1模版选项 template:` <div> <input type=\'date\'> <p>今天已经是冬天了</p> </div> ` }); let profile2 = Vue.extend({ // 1.1模版选项 template:` <div> <input type=\'color\'> <p>我是色板</p> </div> ` }); // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, components: { \'my-date\': profile, \'my-color\': profile2 } }); // 创建vue的实例 let vm1 = new Vue({ el: \'#app1\', data: { name: \'si peng\' }, }); </script> </body> </html>
简便写法：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的局部组件</title> </head> <body> <div id="app"> <my-date></my-date> <my-color></my-color> </div> <!-- 这里调用不到的，会报错 --> <div id="app1"> <my-date></my-date> <my-color></my-color> </div> <script src="js/vue.js"></script> <script> // 1.创建组件构造器 let profile = Vue.extend(); let profile2 = Vue.extend({ // 1.1模版选项 template:` <div> <input type=\'color\'> <p>我是色板</p> </div> ` }); // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, components: { \'my-date\': { // 1.1模版选项 template:` <div> <input type=\'date\'> <p>今天已经是冬天了</p> </div> ` }, \'my-color\': profile2 } }); // 创建vue的实例 let vm1 = new Vue({ el: \'#app1\', data: { name: \'si peng\' }, }); </script> </body> </html>
四.Vue的父子组件：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的全局组件</title> </head> <body> <div id="app"> <parent></parent> </div> <script src="js/vue.js"></script> <script> // 1.创建组件构造器 let child1 = Vue.extend({ // 1.1模版选项 template:` <div> <img src="images/3.jpeg" width="200"></img> </div> ` }); // 1.创建组件构造器 let child2 = Vue.extend({ // 1.1模版选项 template:` <div> <p>思思美美哒！</p> </div> ` }); // 2.父组件构造器 Vue.component(\'parent\', { components: { \'my-child1\': child1, \'my-child2\': child2 }, template: ` <div> <my-child1> </my-child1> <my-child2> </my-child2> </div> ` }) // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, }); </script> </body> </html>
五.Vue的teplate标签和script标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue的template标签和script标签</title> </head> <body> <div id="app"> <div> <my-div> </my-div> </div> <!-- template标签 --> <!-- <template id=\'my-div\'> <div>我是思思</div> <div>我是思思2</div> </template> --> <!-- script标签 --> <script type=“text/template” id=\'my-div\'> <div> <p>思思，你好啊！</p> </div> </script> </div> <script src="js/vue.js"></script> <script> // 实例化组件 Vue.component(\'my-div\', { template: \'#my-div\' }); // 创建vue的实例 let vm = new Vue({ el: \'#app\', data: { name: \'si peng\' }, }); </script> </body> </html>
开发中使用更多的是template标签定义子组件。
六.Vue中的data选项注意事项：
// 实例化组件 Vue.component(\'my-div\', { template: \'#my-div\', // 1.这样使用会报错！ // data: { // message: \'思思\', // } // 2.这样才是正确的，data必须以函数设置 data() { return { maessage: \'思思\' } } });
以上是关于Vue的基础学习的主要内容，如果未能解决你的问题，请参考以下文章