第1步,创建一个html5
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title></head><body><div id="firstVue" class="demo"></div></body></html>
重点是添加了一个<div id="firstVue" class="demo"></div>
第2步:添加vue3.js的CDN链接,这样可以省去vue2和vue3版本切换的麻烦,也不需要安装node.jd的npm
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script></head><body><div id="firstVue" class="demo">{{ my_data }}</div><script>const myVue = {data() {return {my_data: 'Hello Vue!!'}}}Vue.createApp(myVue).mount('#firstVue')</script></body></html>
以上代码运行后(建议在服务器状态下运行,可以在本地安装一个IIS,apache或者Nginx),
将在浏览器中显示 "Hello Vue!!"
Vue.createApp(myVue).mount('#firstVue')这行代码建立 一个myVue实例,并绑定在firstVue标签上,第17行my_data: 'Hello Vue!!'修改了{{ my_data }}的数据内容,双大括号是Vue的格式模板.
第3步:如何修改属性?
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue 测试实例</title><script src="cloudflare.com/ajax/libs/vue/3.2.45/vue.global.min.js"></script></head><body><div id="app"><a v-bind:href="abc"><p>{{my_data}}</p></a></div> </div><script>const myVue = {data() {return {my_data: 'Hello Vue2!!',abc: 'abc.com'}}}Vue.createApp(myVue).mount('#app')</script></body></html>
以上代码通过v-bind给<a>的href属性指定了abc变量 ,而后续的vue直接修改了abc的值为'abc.com',这样就完成了属性的修改
