在教程安装里给出了多种引入方式，具体点击这里
直接</script>引入
在编辑器上输入html回车，这时候就会自动补全以下代码
<<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
引入 Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
在页面输出hello Vue,用浏览器打开文件并检验效果
<div>hello Vue</div>
可以之后我们改造源文件让它与Vue产生关联：new 一个Vue实例
<script type="text/javascript">
new Vue({
el: '#app', //挂载到指定节点上
data: {
message: 'Hello Vue!'
}
})
</script>
所挂载的节点需要添加一个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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app', //挂载到指定节点上
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是循环遍历
- @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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app', //挂载到指定节点上
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>'
})
创建一个 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>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<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', //挂载到指定节点上
data: {
message: 'Hello Vue!',
info: '',
list:[],
},
methods: {
handleClick(){
console.log(this.info)
this.list.push(this.info)//往list数组添加数据
this.info = ''//每次点击add的同时，清空输入框
}
}
})
</script>
</html>
以上操作有几个缺点
- 全局定义：强制要求每个component中的命名不得重复
- 字符串模版：缺乏语法高亮，在html有多行的时候，需要用\
- 不支持CSS：意味着当html和JavaScript组件化时，CSS明显被遗漏
- 没有构建步骤：限制只能用html和ES5 JavaScript,而不能使用预处理器，如Pug(formerly Jade)和Babel，即每次都需要手动在浏览器上刷新，没有自动热更新。
npm安装
安装Vue
npm install vue
安装命令行工具 (CLI)Vue CLI
npm install -g @vue/cli
出现安装问题
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出现版本信息则说明安装成功
创建新项目
vue create my-app
使用默认安装
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 图标
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>样式作用域只在该文件内有效
在App.vue文件的模版中替换div内容,新建主件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>
作用域插槽(使用场景：由子控件传递值给父控件，供父控件使用修改显示，选中由红变蓝)
<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>
动手复制代码跑来看看效果吧 👇👇👇👇👇👇👇👇👇
<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语法
