Vue3.0简单响应式
https://v3.cn.vuejs.org/api/
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> hello Vue.js </title> </head> <body> <!--View--> <div id="app"> <button @click="increment"> count值：{{state.count}} </button> </div> <!--引入Vue.js--> <script src="https://unpkg.com/vue@next"></script> <script> const App={ setup(){ //为目标对象创建一个响应式对象 const state = Vue.reactive({count: 0}); function increment(){ state.count++; } return { state, increment } } }; //创建应用程序实例，该实例提供应用程序上下文 //应用程序实例装载的整个组件树将共享相同的上下文 const app = Vue.createApp(App); app.mount('#app'); </script> </body> </html>
将https://unpkg.com/vue@next浏览器打开中的代码复制出来创建个vue.js本地直接引用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{message}}</h1> </div> <script src="js/vue.3.2.2.js"></script> <script> //0、创建实例的全局配置对象 const HelloVue = { data(){//定义数据 return { message:'你好！' } } }; // 1、创建Vue的实例对象 const app = Vue.createApp(HelloVue).mount('#app'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <div>{{colleges}}</div> <p>--------------------</p> <ul> <li>{{colleges[0]}}</li> <li>{{colleges[1]}}</li> <li>{{colleges[2]}}</li> </ul> <p>--------------------</p> <ul> <li v-for="college in colleges">{{college}}</li> </ul> </div> <script src="js/vue.3.2.2.js"></script> <script> //0、创建实例的全局配置对象 const listApp = { data(){//定义数据 return { colleges: ['web','java','vue'] } } }; // 1、创建Vue的实例对象 const app = Vue.createApp(listApp).mount('#app'); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <h1>{{message}}</h1> <p>--------------------</p> <button v-on:click="message='hello btn1!'">btn1</button> <button v-on:click="message='hello btn2!'">btn2</button> <button v-on:click="btn3">btn3</button> <button v-on:click="btn4">btn4</button> <button @click="btn5">btn5</button> </div> <script src="js/vue.3.2.2.js"></script> <script> // 1、创建Vue的实例对象 const app = Vue.createApp({ data(){//定义数据 return { message:'你好！' } }, methods:{ btn3(){ this.message="hello btn3"; }, btn4(){ this.message="hello btn4"; }, btn5(){ this.message="hello btn5"; } } }).mount('#app'); </script> </body> </html>
