在教程安裝里給出了多種引入方式，具體點擊這里
直接</script>引入
在編輯器上輸入html回車宁赤，這時候就會自動補全以下代碼
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
引入 Vue
<!-- 開發(fā)環(huán)境版本决左，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在頁面輸出hello Vue,用瀏覽器打開文件并檢驗效果
<div>hello Vue</div>
可以之后我們改造源文件讓它與Vue產(chǎn)生關(guān)聯(lián)：new 一個Vue實例
<script type="text/javascript">
new Vue({
el: '#app', //掛載到指定節(jié)點上
data: {
message: 'Hello Vue!'
}
})
</script>
所掛載的節(jié)點需要添加一個id
<div id="app">{{ message }}</div>
最終源碼
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<div id="app">{{ message }}</div>
<!-- 開發(fā)環(huán)境版本哆窿，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app', //掛載到指定節(jié)點上
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
此時用瀏覽器打開即可見到顯示Hello Vue!
參考官方demo 鏈接
添加方法
添加顯示
<div class="addMethod">
<input type="text" name="" value="" v-model="info">
<button type="button" name="button" @click="handleClick">add</button>
</div>
其中
- v-model是Vue里面的雙向綁定，
- v-for是循環(huán)遍歷
- @click="handleClick" 綁定方法
- console.log(this.info) 打印信息擦秽，如何查看打印輸出：瀏覽器-右鍵-檢查-Console
- handleClick方法生命在methods對象里面
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
<div id="app">
{{ message }}
<div class="addMethod">
<input type="text" name="" value="" v-model="info">
<button type="button" name="button" @click="handleClick">add</button>
</div>
<ul>
<li v-for="item in list">{{item}}</li>
</ul>
</div>
<!-- 開發(fā)環(huán)境版本感挥，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app', //掛載到指定節(jié)點上
data: {
message: 'Hello Vue!',
info: '',
list:[],
},
methods: {
handleClick(){
//console
this.list.push(this.info)
this.info = ''
}
}
})
</script>
</html>
使用自定義組件
定義名為 todo-item 的新組件
Vue.component('todo-item',{
props:['item'],
template: '<li class="item">{{item}}</li>'
})
創(chuàng)建一個 todo-item 組件的實例，并傳遞屬性值 v-bind:item="item"或者簡寫成:item="item"
<todo-item v-for="item in list" :item="item">{{item}}</todo-item>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.item {
color:red;
}
</style>
</head>
<body>
</body>
<div id="app">
{{ message }}
<div class="addMethod">
<input type="text" name="" value="" v-model="info">
<button type="button" name="button" @click="handleClick">add</button>
</div>
<ul>
<todo-item v-for="item in list" :item="item">{{item}}</todo-item>
</ul>
</div>
<!-- 開發(fā)環(huán)境版本置谦，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
Vue.component('todo-item',{
props:['item'],
template: '<li class="item">{{item}}</li>'
})
new Vue({
el: '#app', //掛載到指定節(jié)點上
data: {
message: 'Hello Vue!',
info: '',
list:[],
},
methods: {
handleClick(){
console.log(this.info)
this.list.push(this.info)//往list數(shù)組添加數(shù)據(jù)
this.info = ''//每次點擊add的同時媒峡，清空輸入框
}
}
})
</script>
</html>
以上操作有幾個缺點
- 全局定義：強制要求每個component中的命名不得重復(fù)
- 字符串模版：缺乏語法高亮谅阿，在html有多行的時候签餐，需要用\
- 不支持CSS：意味著當(dāng)html和JavaScript組件化時氯檐，CSS明顯被遺漏
- 沒有構(gòu)建步驟：限制只能用html和ES5 JavaScript,而不能使用預(yù)處理器嘴脾，如Pug(formerly Jade)和Babel，即每次都需要手動在瀏覽器上刷新耗拓，沒有自動熱更新乔询。
npm安裝
安裝Vue
npm install vue
安裝命令行工具 (CLI)Vue CLI
npm install -g @vue/cli
出現(xiàn)安裝問題
npm WARN deprecated joi@14.3.1: This module has moved and is now available at @hapi/joi. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated topo@3.0.3: This module has moved and is now available at @hapi/topo. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated hoek@6.1.3: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
npm WARN deprecated cross-spawn-async@2.2.5: cross-spawn no longer requires a build toolchain, use it instead
npm ERR! Unexpected end of JSON input while parsing near '...TGOVzYcDOP1jLScCp0ACN'
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/sam/.npm/_logs/2019-04-29T01_23_19_163Z-debug.log
清楚一下緩存
npm cache clean --force
運行vue --version出現(xiàn)版本信息則說明安裝成功
創(chuàng)建新項目
vue create my-app
使用默認(rèn)安裝
Vue CLI v3.7.0
? Please pick a preset: (Use arrow keys)
? default (babel, eslint)
Manually select features
啟動項目
cd my-app
npm run serve
> my-app@0.1.0 serve /Users/sam/Documents/studyUp/my-app
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin .
DONE Compiled successfully in 6412ms 上午9:53:14
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.43.116:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
打開localhost:8080即可見到效果黄锤。
image.png
其中
1 node_modules 整個項目的依賴
2 pubic ico 圖標(biāo)
3 pubic index.html 整個項目的載體<div id="app"></div> 跟上面??直接</script>引入的div一樣
4 src 整個項目的源代碼
5 Main.js 項目入口文件
6 babel.config.js babel配置
7 package.json 依賴包版本
8 說明
將上面的直接</script>引入的demo改成單文件形式??三個模塊獨立
- 模版 template
- 邏輯 script
- 樣式 style
<style scoped>樣式作用域只在該文件內(nèi)有效
在App.vue文件的模版中替換div內(nèi)容,新建主件TodoItem.vue,在App.vue引入并使用
<template>
<li class="item">{{item}}</li>
</template>
<script>
export default {
props: ['item'],
}
</script>
<style scoped>
.item {
color: red;
}
</style>
<template>
<div id="app">
{{ message }}
<div class="addMethod">
<input type="text" name="" value="" v-model="info">
<button type="button" name="button" @click="handleClick">add</button>
</div>
<ul>
<todo-item v-for="item in list" :key="item" :item="item">{{item}}</todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem.vue' //引入TodoItem
export default {
name: 'app',
data() {
return {
message: 'hello vue',
info: '',
list: [],
}
},
methods: {
handleClick() {
this.list.push(this.info)
this.info = ''
}
},
components: {
TodoItem, //注冊TodoItem
}
}
</script>
<style>
</style>
<todo-item v-for="item in list" :key="item" :item="item">{{item}}</todo-item>
上面??是通過屬性來傳遞item，下面??改成插槽的方式
<span style="font-size:20px">{{item}}</span>
此時解析由<li class="item">{{item}}</li>改成
<li class="item">
<slot></slot>
</li>
或者給插槽一個名字(具名插槽)
<todo-item v-for="item in list" :key="item">
<template id="" v-slot:item >
<span style="font-size:20px">{{item}}</span>
</template>
</todo-item>
<template>
<li class="item">
<slot name="item"></slot>
</li>
</template>
作用域插槽(使用場景：由子控件傳遞值給父控件，供父控件使用修改顯示呻待，選中由紅變藍(lán))
<todo-item v-for="item in list" :key="item">
<template id="" v-slot:item="itemProps"> 獲取checked的值
<span :style="{fontSize:'20px', color: itemProps.checked ? 'red' : 'blue' }">{{item}}</span>
</template>
</todo-item>
<template>
<li class="item">
<input type="checkbox" v-model="checked">
<slot name="item" v-bind="{{checked}}"></slot> //將checked 傳遞出去
</li>
</template>
動手復(fù)制代碼跑來看看效果吧 ??????????????????
<template>
<li class="item">
<input type="checkbox" v-model="checked">
<slot name="item" v-bind="{checked}"></slot>
</li>
</template>
<script>
export default {
props: ['item'],
data() {
return {
checked:false
}
}
}
</script>
<style scoped>
.item {
color: red;
}
</style>
<template>
<div id="app">
{{ message }}
<div class="addMethod">
<input type="text" name="" value="" v-model="info">
<button type="button" name="button" @click="handleClick">add</button>
</div>
<ul>
<todo-item v-for="item in list" :key="item">
<template id="" v-slot:item="itemProps">
<span :style="{fontSize:'20px', color: itemProps.checked ? 'red' : 'blue' }">{{item}}</span>
</template>
</todo-item>
</ul>
</div>
</template>
<script>
import TodoItem from './components/TodoItem.vue' //引入TodoItem
export default {
name: 'app',
data() {
return {
message: 'hello vue',
info: '',
list: [],
}
},
methods: {
handleClick() {
this.list.push(this.info)
this.info = ''
}
},
components: {
TodoItem, //注冊TodoItem
}
}
</script>
<style>
</style>
atom插件安裝依次點擊：atom-prefencence-install
- vue-autocomplete
- atom-beautify 代碼格式鍵美化(control+command+b)
- atom-ternjs js補全
- emmet 自定義代碼塊
- file-icons
- highlight-selected 選擇某段代碼自動高亮相同代碼
- language-vue vue語法
