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

歡迎訪問(wèn) 生活随笔！

生活随笔

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

vue

分析初识vue小案例

發(fā)布時(shí)間：2024/1/18 vue 39 豆豆
生活随笔 收集整理的這篇文章主要介紹了 分析初识vue小案例 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

我們已經(jīng)寫(xiě)好了一個(gè)案例：初識(shí)vue小案例

接下來(lái)我們就分析初識(shí)vue小案例

容器和vue實(shí)例是一一對(duì)應(yīng)的！

容器和vue實(shí)例應(yīng)該是一一對(duì)應(yīng)的，不允許出現(xiàn)一對(duì)一或者一對(duì)多

下面是一個(gè)一個(gè)容器對(duì)多個(gè)實(shí)例的例子，這里我們把id選擇器換成類(lèi)選擇器了

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


頁(yè)面上第二個(gè)容器是無(wú)法解析的

然后是一個(gè)容器對(duì)應(yīng)兩個(gè)實(shí)例，很明顯也是不行的

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


只有一個(gè)容器對(duì)一個(gè)實(shí)例才是正常的

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


容器里面vue插值語(yǔ)法{{}}只能寫(xiě)js表達(dá)式

{{xxx}}中的xxx要寫(xiě)js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性

如果寫(xiě)一個(gè)不存在data的屬性肯定是不可以的


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



一旦data中的數(shù)據(jù)發(fā)生變化，那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新

我們可以通過(guò)谷歌vue插件觀察并且發(fā)現(xiàn)vue的值變化


同時(shí)可以點(diǎn)擊value進(jìn)行修改，點(diǎn)擊后面的筆進(jìn)行編輯，然后點(diǎn)擊保存按鈕保存

初識(shí)vue總結(jié)

1 想讓vue工作，就必須創(chuàng)建一個(gè)vue實(shí)例，并且傳入一個(gè)配置對(duì)象（容器）
2 root容器里的代碼仍然符合html規(guī)范，只不過(guò)混入了一些特殊的vue語(yǔ)法
3 root容器里的代碼被稱(chēng)為vue模板
4 vue實(shí)例和容器是一一對(duì)應(yīng)的
5 真實(shí)開(kāi)發(fā)中只有一個(gè)vue實(shí)例，并且會(huì)配合著組件一起使用
6 {{xxx}}中的xxx要寫(xiě)js表達(dá)式，且xxx可以自動(dòng)讀取到data中的所有屬性
7 一旦data中的數(shù)據(jù)發(fā)生變化，那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更新

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。