日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

vue

分析初识vue小案例

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

前言

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

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

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

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

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

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>初始vue</title><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 準備一個容器 --><div id="root"><!-- {{xxx}}是vue中的插值語法 --><h1>hello,{{name}},我今年{{age}}歲了</h1></div><div id="root"><!-- {{xxx}}是vue中的插值語法 --><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><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 準備一個容器 --><div id="root"><!-- {{xxx}}是vue中的插值語法 --><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><!-- 引入vue.js --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 準備一個容器 --><div id="root"><!-- {{xxx}}是vue中的插值語法 --><h1>hello,{{name}},我今年{{age}}歲了</h1></div><div id="root1"><!-- {{xxx}}是vue中的插值語法 --><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小案例的全部內容，希望文章能夠幫你解決所遇到的問題。

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