引用vue

可以引用來(lái)自 bootcdn的vue資源
也可以直接下載下來(lái)。
<script src="vue.js"></script> 在.html文件中引用.js即。

1 構(gòu)建第一個(gè)vue程序

先上代碼

<!-- 指定元素id -->
<div id="app"> 
    <h1> {{title}} </h1> <!-- 插值{{}} -->
</div>
<script>
    // 新建 app 組件
    var app = new Vue({
        el: '#app', //綁定id
        data: {
            title: '標(biāo)題', //配置數(shù)據(jù)
        },
    });
</script>

vue 不能夠掛載在 <html> 和 <body> 標(biāo)簽上。
vue 可以找到 class 和 id的元素
vue 使用 new Vue(傳遞配置信息對(duì)象) 的方式實(shí)例化
配置信息中我們接觸了2個(gè)屬性 el: '綁定的元素', data: {傳遞給元素鍵值對(duì)數(shù)據(jù)}
在頁(yè)面調(diào)試的時(shí)候，我們可以使用控制臺(tái)輸入代碼 app.title="測(cè)試" 來(lái)體驗(yàn)Vue動(dòng)態(tài)渲染頁(yè)面 注意這里不是app.data.title

2 操作元素屬性

要操作元素屬性，必要要在 html代碼中使用 v-bind:屬性="key" 來(lái)綁定屬性，比如 <h1 v-bind:class="color"> ... </h1>
然后在 Vue 的 js代碼中編輯key

var app = new Vue({
    el: '#app',
    data: {
        // key: value,
        color: 'red',
    },
});

定義一個(gè) css 樣式 .red { color: red; }
這樣一來(lái)，html代碼在瀏覽器中其實(shí)是被解析成 <h1 class="red"> ... </h1>，即展示紅色字體。
v-bind: 由于頻繁使用，因此可以簡(jiǎn)寫為 : 。
如果我又想綁定，同時(shí)又想使用其他的樣式類呢？ <h1 v-bind:class="color" :class="'text-center'"> ... </h1> :class="'如果使用雙引號(hào)包單引號(hào)再包字符串，則直接解析為字符串'"

3 v-model & v-once

先上代碼

<div id="app">
    <h1> {{ content }} </h1>
    <h2 v-once> {{ content }} </h1>
    <input type="text" v-model="content">
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            content: '遠(yuǎn)走',
        },
    });
</script>

可以看到： h1就是普通的顯示數(shù)據(jù)， h2則添加了一個(gè)v-once， input則添加了一個(gè)v-model
修改 input 的值，會(huì)發(fā)現(xiàn) h1 的內(nèi)容會(huì)發(fā)生改變， h2 則不會(huì)，是因?yàn)?h2 的 v-once 告訴Vue，h2的內(nèi)容，只從data里讀一次，并不希望隨著數(shù)據(jù)綁定的修改而修改
修改 input 的值，h1 會(huì)隨之發(fā)生改變的原因就是因?yàn)?v-model 綁定了 app.content 。而 h1 沒有使用 v-once。
總結(jié)就是 v-model 綁定某個(gè)數(shù)據(jù)，input.value更改，該數(shù)據(jù)會(huì)隨之發(fā)生變化。如果想只拿初始值，就需要使用 v-once 。

注意元素中的屬性，不需要{{}} 。而標(biāo)簽中的內(nèi)容，需要使用{{}}

4 v-text & v-html

laravel框架在視圖層也使用 {{}} 來(lái)顯示變量，怎么解決？

<div id="app">
    <div v-text="content"></div>
    <div v-html="content"></div>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            content: '<p>v-text & v-html</p>'
        },
    });
</script>

使用 v-text 渲染綁定標(biāo)簽內(nèi)容為純文本， v-html 則會(huì)解析 html標(biāo)簽

5使用 js表達(dá)式在標(biāo)簽屬性或者內(nèi)容里面進(jìn)行運(yùn)算

代碼

<div id="app">
    <p :class="'style'+n">test...</p>
    <p><small>這是當(dāng)前的n的值</small> {{n+'因?yàn)榍袚Q顏色的單選框.value是字符串，所以我這里也變成字符串了'}} </p>
    <input type="radio" v-model="n" value="1"> 紅 
    <input type="radio" v-model="n" value="2"> 藍(lán)
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            n: 1,
        },
    });
</script>

在內(nèi)容進(jìn)行運(yùn)算 {{ n+1 }}
在屬性進(jìn)行運(yùn)算 :class="'style'+n" => 這里的 style 對(duì)應(yīng) .style（因?yàn)閱我?hào)包起來(lái)的），而 n 對(duì)應(yīng) app.n => js中， '字符串'+數(shù)字 = '字符串連接數(shù)字'。因此對(duì)應(yīng)的樣式就是 .style1 和 .style2。
在我們使用單選框修改n的value的時(shí)候，不用給 input.name 指定值，通過(guò) v-model 綁定的，html會(huì)自動(dòng)識(shí)別他們的關(guān)系。（不會(huì)出現(xiàn)兩個(gè)都能選中的情況）
因?yàn)?value="字符串" 所以我們?cè)趦?nèi)容再顯示 {{ n+1 }} 的時(shí)候，就變成了 11 或者 21 (+當(dāng)字符串連接運(yùn)算處理了)

6 computed 計(jì)算

代碼

<div id="app">
    <input type="text" v-model="num1"> +
    <input type="text" v-model="num2"> =
    <input type="text" v-model="sum">
</div>

<script>
    var app = new Vue({
        el: '#app',
        computed: {
            sum: function() {
                return this.num1*1 + this.num2*1;
            }
        },
        data: {
            num1: 0,
            num2: 0,  
        },
    });
</script>

定義計(jì)算屬性 computed computed: { 虛擬屬性: function() { //執(zhí)行運(yùn)算的代碼 } }
上面提到過(guò)，訪問(wèn) data 里定義的數(shù)據(jù)應(yīng)該是直接用 app.key 而不是 app.data.key ，在組件定義的內(nèi)部也一樣，使用 this.key 訪問(wèn) data 下定義的值
v-model="sum" 即綁定了 computed 中的虛擬屬性'sum' (因?yàn)檫@個(gè)sum其實(shí)不存在于內(nèi)存中)
js中想要 + 處理為加法運(yùn)算，而 + 兩邊又是字符串的時(shí)候，給字符串做一次乘法運(yùn)算。
sum: function() { //... } 可以簡(jiǎn)寫為 sum() { //... }

7 watch 監(jiān)聽某個(gè) data 的變化

先用 cnpm 裝一個(gè) 插件 cnpm install axios ，并在頁(yè)面上引用 <script src="node_modules/axios/dist/axios.min.js"></script> 。
代碼

<div id="app">
    <input type="text" v-model="keyWord">
    {{ content }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        watch: {
            keyWord: function(newWord, oldWord) {
                // 將新值作為數(shù)據(jù)參數(shù) $_GET['word'] 請(qǐng)求 7.php 
                axios.get('./7.php?word=' + newWord).then(function(response) {
                    app.content = response.data;
                });
            }
        },
        data: {
            keyWord: '',
            content: '',
        },
    });
</script>

監(jiān)聽的使用 watch: { 監(jiān)聽的data: function(第一個(gè)參數(shù)是舊值, 第二個(gè)參數(shù)是新值) { //值發(fā)生變化后觸發(fā)函數(shù)執(zhí)行的代碼 } }
使用 axios.get(url) 方式請(qǐng)求我們創(chuàng)建的 7.php <?php echo '測(cè)試 test...' . $_GET['word']; 。
使用 axios.then() 內(nèi)部使用回調(diào)函數(shù)處理邏輯，修改我們的 app.content ，這里不能用 this.content 。
最終實(shí)現(xiàn)了一個(gè)：監(jiān)聽 app.keyWord 值的變化，發(fā)生變化時(shí)異步請(qǐng)求(通過(guò) axios 實(shí)現(xiàn))請(qǐng)求后臺(tái)php程序，然后修改了前臺(tái)的app.content的值的功能：（百度搜索，輸入關(guān)鍵字，顯示可以熱門搜索列表的功能），只是我們沒有在php程序中去訪問(wèn)和檢索數(shù)據(jù)庫(kù)罷了。

通常來(lái)說(shuō)502是后臺(tái)有問(wèn)題(php) 404是前臺(tái)有問(wèn)題(沒找到url，地址寫錯(cuò)了)

優(yōu)化：監(jiān)聽 keyWord 的變化時(shí)，，每變化一次，我們都去請(qǐng)求了一次 7.php ，相當(dāng)消耗資源，所以我們裝一個(gè) lodash cnpm install lodash ，在頁(yè)面引用它并且使用 _.becoune(方法, 等待時(shí)間) 來(lái)改寫監(jiān)聽，以控制一定時(shí)間內(nèi)的請(qǐng)求次數(shù)

keyWord: _.debounce( //第一個(gè)參數(shù)是調(diào)用的函數(shù)， 第二個(gè)參數(shù)是等待的時(shí)間
        function(newWord, oldWord) {
        // 將新值作為數(shù)據(jù)參數(shù) $_GET['word'] 請(qǐng)求 7.php 
        axios.get('./7.php?word=' + newWord).then(function(response) {
            app.content = response.data;
        })
    },
    3000, //等待時(shí)間（3s才執(zhí)行一次函數(shù)）
)

8 使用數(shù)組的對(duì)象導(dǎo)入樣式

先定義幾個(gè)樣式

.blue {color: blue;}
.red {color: red;}
.font {font-size: 30px;}

具體代碼

<div id="app">
    <!-- vbind:class 簡(jiǎn)寫為 :class -->
    <!-- 會(huì)覆蓋 class 定義的樣式 因?yàn)?:class 會(huì)在 class 載入后再載入。 -->
    <h1 class="blue" :class="style1">測(cè)試文字</h1>
    <hr>
    <!-- 可以綁定數(shù)組 -->
    <h1 :class="[style2, style3]">測(cè)試文字</h1>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            style1: {red: true, font: true}, //設(shè)置為true 則開啟使用樣式
            style2: 'blue', // key: value 這里的value對(duì)應(yīng) <style>里面定義的樣式</style>
            style3: 'font',
        },
    });
</script>

v-bind:class => :class 會(huì)覆蓋普通的html的 class 屬性
:class=對(duì)象 , 在 data 中定義對(duì)象， key為自己定義的樣式: value為true則確定使用 false則不使用

9 修改 style 屬性的幾種方式

<div id="app">
    <!-- 1、直接寫對(duì)象 -->
    <p :style="{color: 'red', fontSize: size+'px'}">嗯</p> 
    <!-- 注意: 【''】單引號(hào)包起來(lái)的才是字符串，否則比如 size 就一定是在data里面定義的變量 -->
    <input type="number" v-model="size">
    
    <!-- 2、使用對(duì)象： 再次強(qiáng)調(diào)這里的 styleObj 是 data 里定義的對(duì)象 -->
    <p :style="styleObj">哈</p>
    
    <!-- 3、使用數(shù)組：導(dǎo)入多個(gè)對(duì)象  -->
    <p :style="[styleObj, styleObj2]">哦</p>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            size: 20,
            styleObj: {
                color: 'blue',
                fontSize: '30px',
            },
            styleObj2: {
                background: 'red',
            }
        },
    });
</script>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

vue 基礎(chǔ)學(xué)習(xí) 第一天

vue 基礎(chǔ)學(xué)習(xí) 第一天

引用vue

1 構(gòu)建第一個(gè)vue程序

2 操作元素屬性

3 v-model & v-once

4 v-text & v-html

5使用 js表達(dá)式在標(biāo)簽屬性或者內(nèi)容里面進(jìn)行運(yùn)算

6 computed 計(jì)算

7 watch 監(jiān)聽某個(gè) data 的變化

8 使用數(shù)組的對(duì)象導(dǎo)入樣式

9 修改 style 屬性的幾種方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

vue 基礎(chǔ)學(xué)習(xí) 第一天

引用vue

1 構(gòu)建第一個(gè)vue程序

2 操作元素屬性

3 v-model & v-once

4 v-text & v-html

5使用 js表達(dá)式 在標(biāo)簽屬性或者內(nèi)容里面進(jìn)行運(yùn)算

6 computed 計(jì)算

7 watch 監(jiān)聽某個(gè) data 的變化

8 使用數(shù)組的對(duì)象導(dǎo)入樣式

9 修改 style 屬性的幾種方式

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

5使用 js表達(dá)式在標(biāo)簽屬性或者內(nèi)容里面進(jìn)行運(yùn)算