當(dāng)前位置：首頁 > 前端技术 > vue >内容正文

vue

Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on

發(fā)布時間：2025/4/16 vue 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 Vue——基本的代码结构和插值表达式、v-cloak||Vue指令之v-text和v-html||v-bind的三种用法||Vue指令之v-on 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

Vue的基本代碼

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script src="./lib/vue-2.4.0.js"></script> </head><body><div id="app"><p>{{ msg }}</p></div><script>// 2. 創(chuàng)建一個Vue的實例// 當(dāng)我們導(dǎo)入包之后，在瀏覽器的內(nèi)存中，就多了一個 Vue 構(gòu)造函數(shù)// 注意：我們 new 出來的這個 vm 對象，就是我們 MVVM中的 VM調(diào)度者var vm = new Vue({el: '#app', // 表示，當(dāng)前我們 new 的這個 Vue 實例，要控制頁面上的哪個區(qū)域// 這里的 data 就是 MVVM中的 M，專門用來保存每個頁面的數(shù)據(jù)的data: { // data 屬性中，存放的是 el 中要用到的數(shù)據(jù)msg: '歡迎學(xué)習(xí)Vue' // 通過 Vue 提供的指令，很方便的就能把數(shù)據(jù)渲染到頁面上，程序員不再手動操作DOM元素了【前端的Vue之類的框架，不提倡我們?nèi)ナ謩硬僮鱀OM元素了】}})</script> </body></html>

?

?

?

Vue指令之v-bind的三種用法

總結(jié)：

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>[v-cloak] {display: none; }</style> </head><body><div id="app"><p v-cloak>++++++++ {{ msg }} ----------</p><h4 v-text="msg">==================</h4><div>{{msg2}}</div><div v-text="msg2"></div><div v-html="msg2">1212112</div><input type="button" value="按鈕" v-bind:title="mytitle + '123'"> <input type="button" value="按鈕" v-on:click="alert('hello')"> <input type="button" value="按鈕" @click="show"></div><script src="./lib/vue-2.4.0.js"></script><script>var vm = new Vue({el: '#app',data: {msg: '123',msg2: '<h1>哈哈，我是一個大大的H1，我大，我驕傲</h1>',mytitle: '這是一個自己定義的title'},methods: { // 這個 methods屬性中定義了當(dāng)前Vue實例所有可用的方法show: function () {alert('Hello')}}})/* document.getElementById('btn').onclick = function(){alert('Hello')} */</script> </body></html>