重慶九龍坡營銷型網(wǎng)站建設(shè)公司推薦網(wǎng)絡(luò)營銷推廣8種方法
1、首先要導(dǎo)入vue.js
<!-- 當(dāng)你使用script標(biāo)簽安裝vue之后，上下文就注冊了一個全局變量vue --><script src="../1.Vue/js/vue.js"></script>不能直接調(diào)用vue()，需要new vue(),否則會報錯。?
2、關(guān)于vue構(gòu)造函數(shù)的參數(shù)options。。。
①Vue框架要求這個options參數(shù)必須是一個純粹的js對象：{}
②在{}對象中可以編寫大量的key:value對(鍵值對)，一個鍵值對就是一個配置項。
③主要是通過options這個參數(shù)來給Vue實例指定多個配置項。
<body><!-- <div id="app"></div> --><div class="as"></div><script>const myVue = new Vue({// template: '<h1>hello vue！！！</h1>',template: '<h3>你好，vue</h3>'})// myVue.$mount("#app")myVue.$mount(".as")</script>
</body>3、關(guān)于template配置項：
①用來指定模板語句，模板語句是一個字符串形式的。
②模板語句可以是一個純粹的HTML，可以是Vue中的特殊規(guī)則、可以是HTML代碼+vue特殊字符。
③template后面的模板語句會被Vue框架的編譯器編譯，轉(zhuǎn)換成瀏覽器能識別的HTML代碼。
④template后面指定的是模板語句，但是模板語句中只能有一個根節(jié)點。
⑤只要data中的數(shù)據(jù)發(fā)生變化，模板語句一定會重新編譯。(只要data變，template就會重新編譯和渲染)
⑥如果使用template配置項的話，指定掛載位置的元素會被替換。
⑦可以將模板字符串寫到HTML標(biāo)簽中，指定的掛在位置就不會被替換了。
4、模板語句的數(shù)據(jù)來源：
使用data選項給模板語句提供數(shù)據(jù)支持，data選項類型是 Object || Function? 即(對象或函數(shù))；
如果data是對象的話，對象必須是純粹的對象，(含有零個或多個的key/value 對)；
{{}} 這是vue框架自己的一套語法，瀏覽器不能識別，即：模板語法中的插值語法。
5、$mount()方法
Vue實例都有一個$mount()方法，這個方法講Vue實例掛載到指定位置。?
6、配置項：el
el配置項和$mount()方法可以有同樣的效果。
作用：告訴vue實例去接管哪個容器，el是element的縮寫，即元素
//el: '.divs'
el: document.querySelector(".divs")7、瀏覽器提示信息
①提示信息：將productionTip屬性改成false(即設(shè)置是否生成生產(chǎn)提示信息)
Vue.config是Vue的全局配置對象，默認(rèn)值為true。如果是false則阻止生成提示信息。
Vue.config.productionTip = false或者修改vue.js里面的productionTip = false
在chrome上面安裝Vue.js devtools插件，去掉控制臺前面的信息
?8、第一個vue實例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../1.Vue/js/vue.js"></script>
</head>
<body><div class="divs"><div><h1>{{name}}</h1><h1>{{mood}}</h1></div></div><script>new Vue({// template: `<h1>今天剛開啟{{name}}，真的非常{{mood}},// 其他演員是{{actors[0].name}}:{{actors[0].age}}歲,// {{actors[1].name}}:{{actors[1].age}}歲</h1>`,// template: `<div>// <h1>{{name}}</h1>// <h1>{{mood}}</h1>// </div>`,data: {name: 'vue',mood: '開心',actors: [{name: '小蘭子',age: 20},{name: '安欣',age: 40}]},// el: '.divs'el: document.querySelector(".divs")})// }).$mount(".divs")</script>
</body></html>