Vue新手指南之環境搭建及入門
Vue官網：https://cn.vuejs.org
初始Vue
什麼是Vue？
一套用於構建用戶界面的漸進式JavaScript框架
Vue可以自底向上逐層的應用
簡單應用：隻需要一個輕量小巧的核心庫
復雜使用：可以引入各式各樣的Vue插件
Vue的特點：
1、組件化模式，提高代碼復用率，更好維護代碼
2、聲明式編碼：無需直接操作DOM，提高開發效率
3、使用虛擬DOM+Diff算法，復用DOM節點
搭建Vue開發環境
1、下載vue.js
2、創建項目並導入idea
3、官網下載：https://github.com/vuejs/devtools/tree/main
並使用Vue.js devtools
註：在此之後你打開的網頁如果是有Vue寫的，那頭部的Vue小標識會變成綠色
以上Vue環境就搭建ok啦
創建Vue實例
1、想讓Vue工作,就必須創建一個Vue實例 且要傳入一個配置對象
2、root容器裡的代碼依然符合html規范 隻不過混入瞭一些特殊的Vue的語法
3、root容器裡的代碼被稱為[Vue模板]
4、Vue實例和容器是一一對應的
5、真實開發中隻有一個vue實例,並且會配合著組件一起使用
6、{{xxx}}中的xxx要寫js表達式,且xxx可以自動讀取到data中的所有屬性
7、一旦data中的數據發生改變,那麼頁面中用到該數據的地方也會自動更換
註意區分js表達式和js代碼
1、表達式:一個表達式會生成一個值 可以放在任何一個需要值的地方
(1)a (2)a+b (3)demo(1) (4)x===y?‘a’:‘b’
2、js代碼(語句)
(1)if(){} (2)for(){}
<html lang="en">
<head>
<meta charset="UTF-8">
<title>初始Vue</title>
<!--引入Vue開發版-->
<script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--準備容器 為Vue提供模板 把Vue的成果展示-->
<div id="root">
<!--{{js表達式}} 插值語法-->
<h1>Hello!{{name.toUpperCase()}},{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在啟動時生成生產提示。
//創建vue實例
new Vue({
//el用於當前Vue實例為哪個容器服務 值通常為css選擇器字符串
el:'#root',
//data中用於存儲數據 數據供el所指定的容器去使用,值暫時寫成一個對象.
data:{
name:"南風知我意",
address:"上海"
}
})
</script>
</body>
</html>
運行結果：
Vue模板語法
Vue模板語法有兩大類
1、插值語法:
功能:用於解析標簽體內容
寫法:{{xxx}},xxx是js表達式,且可以直接讀取到data中的所有屬性
2、指令語法:
功能:用於解析標簽(包括:標簽屬性、標簽體內容、綁定事件…)
舉例:v-bind:href=“xxx” 或 簡寫為 :href=“xxx”,xxx同樣要寫js表達式
且可以直接讀取data中的所有屬性
備註:Vue中有很多指令,且形式都是:v-???,此處我們隻是拿v-bind舉例
<!--準備容器-->
<div id="root">
<h1>插值語法</h1>
<h3>你好,{{name}}</h3>
<hr/>
<h1>指令語法</h1>
<!--綁定 url當作表達式-->
<a v-bind:href="school.url.toUpperCase()" x="hello">去{{school.name}}</a>
<a :href="url" x="hello">去{{name2}}</a>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //以阻止 vue 在啟動時生成生產提示。
new Vue({
el:'#root',
data:{
name:'南風知我意',
school:{
name: 'csdn',
url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
}
}
})
</script>
運行結果：
Vue數據綁定
Vue中有2種數據綁定的方式:
1、單向綁定( v-bind):數據隻能data流向頁面
2、雙向綁定( v-model):數據不僅能從data流向頁面 還可以從頁面流向data
備註:
1、雙向綁定一般都應用在表單元素上(如:input、select等)
2、 v-model:value可以簡寫為 v-model,因為 v-model的默認收集的就是value值
<!--準備一個容器-->
<div id="root">
<!--普通寫法-->
<!-- 單向數據綁定:<input type="text" v-bind:value="name"><br>
雙向數據綁定:<input type="text" v-model:value="name"><br>-->
<!--簡寫-->
單向數據綁定:<input type="text" :value="name"><br>
雙向數據綁定:<input type="text" v-model="name"><br>
<!--如下代碼 錯誤: v-model隻能應用在表單類元素(輸入類元素)上-->
<h2 v-model:x="name">你好啊</h2>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'南風知我意'
}
})
</script>
運行結果：
el-data的兩種寫法
data與el的兩種寫法
1、el有2種寫法
(1)new Vue時候配置el屬性
(2)先創建Vue實例,隨後再通過vm.$mount(‘#root’)指定el的值
2、data有2種寫法
(1)對象式
(2)函數式
如何選擇:目前哪種寫法都可以,以後學習到組件時,data必須使用函數式,否則會報錯
3、一個重要原則
由Vue管理的函數,一定不要寫箭頭函數,一旦寫瞭箭頭函數 this就不再是Vue實例瞭
<!--準備容器-->
<div id="root">
<h1>你好,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
//el的兩種寫法
const v=new Vue({
//el:'#root', //第一種寫法
data:{
name:'尚矽谷'
}
})
console.log(v)
v.$mount('#root') //第二種寫法
//data的兩種寫法
const v=new Vue({
el:'#root',
//data的第一種寫法 對象式
/*data:{
name:'尚矽谷'
}*/
//data的第二種寫法:函數式
data(){
console.log('@@@',this) //此處的this是Vue實例對象
return{
name:'南風知我意'
}
}
})
</script>
MVVM模型
1、M:模型(Model):data中的數據
2、V:視圖(View):模板代碼
3、VM:視圖模型(ViewModel):Vue實例
觀察發現:
1、data中的所有屬性 在最後都出現在瞭vm身上
2、vm身上所有的屬性及Vue原型上的所有屬性,在Vue模板中都可以直接使用
<!--準備容器-->
<div id="root">
<!--view-->
<h1>學校名稱:{{name}}</h1>
<h1>學校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false
const vm=new Vue({ //viewmodel
el:'#root',
data:{
/*model*/
name:'南風',
address:'長沙'
}
})
console.log(vm)
</script>
Vue數據代理
通過一個對象代理對另一個對象中屬性的操作(讀、寫)
1、Vue中的數據代理:
通過vm對象來代理data對象中的屬性的操作(讀、寫)
2、Vue中數據代理的好處
更加方便的操作data中的數據
3、基本原理
通過Object.defineProperty()把data對象中所有的屬性添加到vm上
為每一個添加到vm上的屬性 都指定一個getter、setter
在getter、setter內部去操作(讀、寫)data中對應的屬性
<!--準備容器-->
<div id="root">
<!--view-->
<h1>學校名稱:{{name}}</h1>
<h1>學校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //阻止Vue在啟動時生成生產提示
const vm=new Vue({
el:'#root',
data:{
name:'南風',
address:'長沙'
}
})
</script>
Vue中的事件處理
事件的基本使用:
1、使用v-on:xxx 或 @xxx綁定事件 其中xxx是事件名
2、事件的回調需要配置在methods對象中,最終會在vm上
3、methods中配置的函數,不需要箭頭函數 否則this就不是vm瞭
4、methods中配置的函數,都是被Vue所管理的函數,this的指向是vm或組件實例對象
5、@click=”demo”和@click=”demo($event)”效果一致,但後者可以傳參
<!--準備容器-->
<div id="root">
<h1>歡迎來到尚矽谷學習</h1>
<!--<button v-on:click="showInfo">點我提示信息</button>-->
<button @click="showInfo1">點我提示信息1</button>
<button @click="showInfo2(66,$event)">點我提示信息2</button>
</div>
</body>
<script type="text/javascript">
Vue.config.productionTip=false //阻止Vue在啟動時生成生產提示
new Vue({
el:'#root',
data: {
name: '尚矽谷'
},
methods:{
showInfo1(event){
/* console.log(event.target.innerHTML)
console.log(this) //此處的this是vm*/
alert("同學你好1")
},
showInfo2(number,a){
/* console.log(event.target.innerHTML)
console.log(this) //此處的this是vm*/
alert("同學你好2")
console.log(number,a)
}
}
})
</script>
總結
到此這篇關於Vue新手指南之環境搭建及入門的文章就介紹到這瞭,更多相關Vue環境搭建及入門內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！