當前位置：首頁 > 前端技术 > vue >内容正文

vue

分析初识vue小案例

發布時間：2024/1/18 vue 38 豆豆

生活随笔收集整理的這篇文章主要介紹了分析初识vue小案例小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

前言

我們已經寫好了一個案例：初識vue小案例

接下來我們就分析初識vue小案例

容器和vue實例是一一對應的！

容器和vue實例應該是一一對應的，不允許出現一對一或者一對多

下面是一個一個容器對多個實例的例子，這里我們把id選擇器換成類選擇器了

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>初始vue</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>hello,{{name}},我今年{{age}}歲了</h1></div><div id="root"><h1>hello,{{name}},我今年{{age}}歲了</h1></div><p #a></p><script type="text/javascript">// 設置為 false 以阻止 vue 在啟動時生成生產提示。Vue.config.productionTip= false // 創建一個vue實例new Vue({// 屬性通常為key:value的形式 key是不能變得，value可以變,多個key之前用,分割最后一個key不寫,el:'#root', // el就是的簡寫element，用于指定當前vue實例為哪個容器服務，值通常為css選擇器字符串data:{ // data用于存儲數據，數據供el所指定的容器使用，可以存好幾個值也是key:value的形式name:'vue',age:'18'}})</script></body></html>

頁面上第二個容器是無法解析的

然后是一個容器對應兩個實例，很明顯也是不行的

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>初始vue</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>hello,{{name}},我今年{{age}}歲了</h1></div><p #a></p><script type="text/javascript">// 設置為 false 以阻止 vue 在啟動時生成生產提示。Vue.config.productionTip= false // 創建一個vue實例new Vue({// 屬性通常為key:value的形式 key是不能變得，value可以變,多個key之前用,分割最后一個key不寫,el:'#root', // el就是的簡寫element，用于指定當前vue實例為哪個容器服務，值通常為css選擇器字符串data:{ // data用于存儲數據，數據供el所指定的容器使用，可以存好幾個值也是key:value的形式name:'vue',age:'18'}})// 創建一個vue實例new Vue({// 屬性通常為key:value的形式 key是不能變得，value可以變,多個key之前用,分割最后一個key不寫,el:'#root', // el就是的簡寫element，用于指定當前vue實例為哪個容器服務，值通常為css選擇器字符串data:{ // data用于存儲數據，數據供el所指定的容器使用，可以存好幾個值也是key:value的形式name:'java',age:'28'}})</script></body></html>

只有一個容器對一個實例才是正常的

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>初始vue</title><script type="text/javascript" src="../js/vue.js"></script></head><body><div id="root"><h1>hello,{{name}},我今年{{age}}歲了</h1></div><div id="root1"><h1>hello,{{name}},我今年{{age}}歲了</h1></div><p #a></p><script type="text/javascript">// 設置為 false 以阻止 vue 在啟動時生成生產提示。Vue.config.productionTip= false // 創建一個vue實例new Vue({// 屬性通常為key:value的形式 key是不能變得，value可以變,多個key之前用,分割最后一個key不寫,el:'#root', // el就是的簡寫element，用于指定當前vue實例為哪個容器服務，值通常為css選擇器字符串data:{ // data用于存儲數據，數據供el所指定的容器使用，可以存好幾個值也是key:value的形式name:'vue',age:'18'}})// 創建一個vue實例new Vue({// 屬性通常為key:value的形式 key是不能變得，value可以變,多個key之前用,分割最后一個key不寫,el:'#root1', // el就是的簡寫element，用于指定當前vue實例為哪個容器服務，值通常為css選擇器字符串data:{ // data用于存儲數據，數據供el所指定的容器使用，可以存好幾個值也是key:value的形式name:'java',age:'28'}})</script></body></html>

容器里面vue插值語法{{}}只能寫js表達式

{{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性

如果寫一個不存在data的屬性肯定是不可以的

但是寫一些其他的是可以的，比如1+1，Date.now(),這些都是js的表達式

一旦data中的數據發生變化，那么頁面中用到該數據的地方也會自動更新

我們可以通過谷歌vue插件觀察并且發現vue的值變化

同時可以點擊value進行修改，點擊后面的筆進行編輯，然后點擊保存按鈕保存

初識vue總結

1 想讓vue工作，就必須創建一個vue實例，并且傳入一個配置對象（容器）
2 root容器里的代碼仍然符合html規范，只不過混入了一些特殊的vue語法
3 root容器里的代碼被稱為vue模板
4 vue實例和容器是一一對應的
5 真實開發中只有一個vue實例，并且會配合著組件一起使用
6 {{xxx}}中的xxx要寫js表達式，且xxx可以自動讀取到data中的所有屬性
7 一旦data中的數據發生變化，那么頁面中用到該數據的地方也會自動更新

總結

以上是生活随笔為你收集整理的分析初识vue小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

案例
Vue

上一篇： React学习分享（八）
下一篇：人事管理系统:HR手机版__WeOrg