14Vue组件的data和method的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> <app-I-L-S></app-I-L-S> <app-Templete></app-Templete> <app-Template></app-Template> <app-Name></app-Name> </div> <template id="appNameT"> <!--注意template外层请定义div如果有多个vue元素--> <div> <h1>这是直接元素定义为组件 {{count}}</h1> <button @click='add'>增加</button> </div> </template> <script> const msg = "Hello Vue Hello ES6"; //1.使用extend创建组件 //按照Java的开发思想，创建时采用驼峰命名法，使用的时候每个单词必须用-隔开 var appILS = Vue.extend({ template: '<h3>这是用extend创建的组件</h3>' }) Vue.component('appILS', appILS); //2.不使用extend创建组件 Vue.component('appTemplete', { template: "<h3>这是不使用extend创建的组件</h3>" }) //使用ES6新语法 ，完成元素拼接 //ES6中如果使用变量直接${msg}的方式 Vue.component("appTemplate", { template: `<div> <h1>这里采用多行的方式将元素进行组件化使用ES6的\`\`语法信息为：${msg}</h1> </div> ` }) Vue.component("appName", { template: '#appNameT', data() { return { count: 1, } }, methods: { add() { this.count++ } } }) var vm = new Vue({ el: '#app', data: { //data用来存放每个页面的数据 msg: "Hello Vue Hello ES6" } }) </script> </body> </html>
所需依赖：
1.npm i vue
