文章目录
优点
- 体积小 33k
- 运行效率高
- 基于虚拟dom
- 预处理
- 双向数据绑定
- 生态丰富，学习成本低
安装
使用scirpt标签引入（入门）
- 下载并使用script标签引入（vue会被注册为一个全局变量）
- 开发环境不要用压缩版本（会失去所有常见错误的相关警告）
- 生产版本删除了警告
CLI命令行工具搭建
新建vue工程
-
下载开发版本的vue.js
-
将vue.js放入一个空的工程文件夹中
-
新建.html文件和.vue文件
-
在html文件中引入vue.js
引入方式
-
下载到本地并引入
-
CDN引入最新的vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> -
引入指定版本的vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script> -
兼容 ES Module 的构建文件
<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js' </script>
-
创建vue应用
vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统
视图（html）
<div id="app">
{{ message }}
</div>
常见文本插值 {{}}
脚本(js)
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
- 声明全局变量Vue，得到vue.js的对象
- 参数：对象
- 参数对象的属性
- el
- 元素
- 利用id选择器选中div
- '#app’必须是单引号
- data
- 数据
- 注册变量，初始化变量
- el
数据与方法
创建vue实例
- 用vm接收对象实例（ViewModel 视图模型）
数据与方法
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
// 获得这个实例上的 property
// 返回源数据中对应的字段
vm.a == data.a // => true
// 设置 property 也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
- vm中的data为{ a: 1 }，可以用vm.a，也可以用vm.$data.a
- 只有在创建Vue对象时设置的数据才是响应式的
- 创建Vue之后添加的属性将不再是响应式的。
- 如果晚些添加属性的值，可以在初始化Vue对象的时候给该属性置空，以便之后修改。
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
- Object.freeze(obj) 可以阻止修改现有属性，数据将不再响应。
Vue的实例属性和方法
-
有$前缀，与用户自定义的属性区分开
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // => true vm.$el === document.getElementById('example') // => true // $watch 是一个实例方法 vm.$watch('a', function (newValue, oldValue) { // 这个回调将在 `vm.a` 改变后调用 })
生命周期
实例生命周期钩子
vue初始化过程
- 数据监听
- 编译模板
- 将实例挂载到 DOM 并在数据变化时更新 DOM
- 会运行一些叫做生命周期钩子的函数，
- 这给了用户在不同阶段添加自己的代码的机会。
生命周期（常用）
- 要以属性的方式，写在传递的对象内
- 值是一个函数
- 函数不能使用箭头函数（箭头函数没有this）
- 在运行的每个阶段，系统会自动调用对应的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
//整个页面创建之前 实例创建之后
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
//数据完成配置
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>
生命周期（涉及组件）
具体看API
-
actived
-
deactivated
-
beforeDestory
-
destory
-
errorCaptured
生命周期图示
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g2aIjjXo-1650953238660)(D:\资料\typora\前端开发\vue\lifecycle.png)]
模板语法
插值
-
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
-
所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
-
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量，你也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。
- 在标签中绑定时，直接在引号中写属性名
文本
- 数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：
<span>Message: {{ msg }}</span>
- v-once 这个将不会改变
- 但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
原始html
- 使用v-html使变量的值不再是字符串，而是html标签
<p v-html="rawHtml"></p>
var vm = new Vue({
el : "#app",
data : {
rawHtml : '<span style="color:red">this is should be red</span>',
}
});
特性
v-bind
- 绑定属性值
<div v-bind:class="color">test...</div>
var vm = new Vue({
el : "#app",
data : {
color:'red'
}
});
使用JavaScript表达式
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
-
{{ number + 1 }} 简单运算
-
{{ ok ? ‘YES’ : ‘NO’ }} 三元运算符
- ok为false 输出NO，否则输出YES
-
{{ message.split(‘’).reverse().join(‘’) }} 函数运算
- 将字符串逐个拆分，反转，再拼接
指令
指令 (Directives) 是带有 v- 前缀的特殊 attribute。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
<p v-if="seen">现在你看到我了</p>
var vm = new Vue({
el : "#app",
data : {
seen : false
}
});
参数
<a v-bind:href="url">...</a>
var vm = new Vue({
el : "#app",
data : {
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
}
});
修饰符
修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
- @click 绑定事件
- .stop 修饰符 执行click2的时候，不执行click
<div @click="click1">
<div @click.stop="click2">
click me
</div>
</div>
var vm = new Vue({
el : "#app",
data : {},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
}
}
});
缩写
v-bind
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
Calss与Style绑定
-
数组语法
v-bind:class=“[ isActive ? ‘active’ : ‘’, isGreen ? ‘green’ : ‘’ ]”
-
对象语法
:style=“{color:color, fontSize:size, background: isRed ? ‘#FF0000’ : ‘’}”>
<div
class="test"
v-bind:class="[ isActive ? 'active' : '',
isGreen ? 'green' : '' ]"
style="width:200px; height:200px; text-align:center; line-height:200px;">
hi vue
</div>
<div
:style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
hi vue
</div>
var vm = new Vue({
el : "#app",
data : {
isActive : true,
isGreen : true,
color : "#FFFFFF",
size : '50px',
isRed : true
}
});
条件渲染
v-if
v-if
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
var vm = new Vue({
el : "#app",
data : {
type : "B",
ok : false
}
});
template
因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
<template v-if="ok">
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
v-else
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。
v-else-if
类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
key
- 允许用户在不同的登录方式之间切换
- 切换
loginType将不会清除用户已经输入的内容
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
- key的使用
- “这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的
keyattribute 即可 - 注意，
<label>元素仍然会被高效地复用，因为它们没有添加keyattribute。
- “这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
v-show
-
不同的是带有
v-show的元素始终会被渲染并保留在 DOM 中。 -
v-show只是简单地切换元素的 CSS propertydisplay。
<h1 v-show="ok">Hello!</h1>
var vm = new Vue({
el : "#app",
data : {
ok : false
}
});
v-if和v-show的区别
-
v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 -
v-if也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 -
相比之下，
v-show就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。
- 因此，如果需要非常频繁地切换，则使用
v-show较好； - 如果在运行时条件很少改变，则使用
v-if较好。
列表渲染
v-for
-
我们可以用
v-for指令基于一个数组来渲染一个列表。v-for指令需要使用item in items形式的特殊语法，其中items是源数据数组，而item则是被迭代的数组元素的别名。 -
你也可以用
of替代in作为分隔符，因为它更接近 JavaScript 迭代器的语法
数组
v-for=“item in items”
<ul id="example-1">
<li v-for="item in items" :key="item.message">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5UYPHstn-1650953238661)(D:\资料\typora\前端开发\vue\image-20220323111753940.png)]
v-for=“(item, index) in items”
- 括号可以省略
<ul id="example-2">
<li v-for="(item, index) in items">
{{ index }} - {{ item.message }}
</li>
</ul>
var example2 = new Vue({
el: '#example-2',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})
对象
v-for=“value in object”
<ul id="v-for-object" class="demo">
<li v-for="value in object">
{{ value }}
</li>
</ul>
new Vue({
el: '#v-for-object',
data: {
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
}
}
})
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4StoWY1d-1650953238662)(D:\资料\typora\前端开发\vue\image-20220323111726638.png)]
v-for=“(value, key) in object”
- 括号可以省略
<div v-for="(value, key) in object">
{{ key }}: {{ value }}
</div>
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-o9PNzcaP-1650953238663)(D:\资料\typora\前端开发\vue\image-20220323170216936.png)]
v-for=“(value, key, index) in object”
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
维护状态
-
当 Vue 正在更新使用
v-for渲染的元素列表时，它默认使用“就地更新”的策略。 -
如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素，并且确保它们在每个索引位置正确渲染。这个类似 Vue 1.x 的
track-by="$index"。 -
这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。
-
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一
keyattribute： -
默认不改变节点顺序
<ul id="example-2"> <li v-for="(item, index) in items" :key="index"> {{ index }} - {{ item.message }} </li> </ul>
事件处理
v-on
- 把函数直接写在html中
<button v-on:click="counter += 1"> 数值 : {{ counter }} </button><br />
- 把函数直接写在js中
<button v-on:dblclick="greet('abc', $event)">Greet</button>
var vm = new Vue({
el : "#app",
data : {
counter: 0,
name : "vue"
},
methods:{
greet : function (str, e) {
alert(str);
console.log(e);
alert(this.name);//调用data数据
}
}
});
事件修饰符
-
在事件处理程序中调用
event.preventDefault()或event.stopPropagation()是非常常见的需求。 -
尽管我们可以在方法中轻松实现这点，但更好的方式是：
-
方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
-
为了解决这个问题，Vue.js 为
v-on提供了事件修饰符。 -
修饰符是由点开头的指令后缀来表示的。
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
绑定的事件
- dblclick 双击事件
- click 点击事件
- 撒打发
表单输入绑定
v-model
基础用法
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：
- text 和 textarea 元素使用
valueproperty 和input事件； - checkbox 和 radio 使用
checkedproperty 和change事件； - select 字段将
value作为 prop 并将change作为事件。 - 对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现
v-model不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用input事件。
文本
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
var vm = new Vue({
el : "#app",
data : {
message : ""
},
});
文本域
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message2 }}</p>
<br />
var vm = new Vue({
el : "#app",
data : {
message2 :"hi"
}
});
复选框（数组）
<div style="margin-top:20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
var vm = new Vue({
el : "#app",
data : {
checkedNames : ['Jack', 'John']
},
methods: {
submit : function () {
console.log(this.message);
}
}
});
单选
<div style="margin-top:20px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
var vm = new Vue({
el : "#app",
data : {
picked : "Two"
}
});
表单提交
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div id="example-1">
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>
<textarea v-model="message2" placeholder="add multiple lines"></textarea>
<p style="white-space: pre-line;">{{ message2 }}</p>
<br />
<div style="margin-top:20px;">
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
</div>
<div style="margin-top:20px;">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
<button type="button" @click="submit">提交</button>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
message : "test",
message2 :"hi",
checkedNames : ['Jack', 'John'],
picked : "Two"
},
methods: {
submit : function () {
console.log(this.message);
console.log(this.$data);
console.log(JSON.stringify(this.$data))
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
组件基础
组件实例
-
创建函数
- Vue.component(‘组件名称’, {属性，数据，模板内容，方法})
-
模板
-
最外边用一个div，才能使模板中的元素全部渲染在页面上
-
插槽
-
可以插入任意的html标签
-
hi...h2
-
-
属性和方法可以在模板中进行使用
-
-
方法
- 触发事件
- this.$emit(‘clicknow’, this.count);
- 传递 （事件名称，可携带参数）
- 点击按钮会调用这个方法
- 在html中 @clicknow=“clicknow” 给该触发方法绑定vue实例中的方法
- 触发事件
-
组件复用
- 相互之间没有影响
<button-counter></button-counter>
<button-counter></button-counter>//组件复用
<button-counter title="title1 : " @clicknow="clicknow">
<h2>hi...h2</h2>
</button-counter>
<button-counter title="title2 : "></button-counter>
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
props: ['title'],//属性
data: function () {//数据
return {
count: 0
}
},
template: '<div><h1>hi...</h1><button v-on:click="clickfun">{{title}} You clicked me {{ count }} times.</button><slot></slot></div>',//模板
methods:{
clickfun : function () {
this.count ++;
this.$emit('clicknow', this.count);
}
}//方法
})
var vm = new Vue({
el : "#app",
data : {
},
methods:{
clicknow : function (e) {
console.log(e);
}
}
});
组件注册
组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
该组件名就是 Vue.component 的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
组件名命名方式
两种方式
kebab-case
- 在引用这个自定义元素时使用 kebab-case，例如
<my-component-name>。
Vue.component('my-component-name', { /* ... */ })
PascalCase
- 在引用这个自定义元素时两种命名法都可以使用。
- 也就是说
<my-component-name>和<MyComponentName>都是可接受的。
- 也就是说
- 注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
Vue.component('MyComponentName', { /* ... */ })
全局注册
- 这些组件是全局注册的。
- 也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (
new Vue) 的模板中。 - 在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
局部注册
-
全局注册往往是不够理想的。
- 比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。
-
局部注册的方法
- 在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
- 在Vue创建函数对象内声明components属性来局部注册组件
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }
new Vue({
el: '#app',
components: {
'component-a': ComponentA,
'component-b': ComponentB
}
})
- 注意局部注册的组件在其子组件中不可用。
- 例如，如果你希望
ComponentA在ComponentB中可用，则你需要这样写：
- 例如，如果你希望
var ComponentA = { /* ... */ }
var ComponentB = {
components: {
'component-a': ComponentA
},
// ...
}
- 通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：
- 引入组件 import ComponentA from ‘./ComponentA.vue’
import ComponentA from './ComponentA.vue'
export default {
components: {
ComponentA
},
// ...
}
单文件组件
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
- 全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
- 字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的
\ - 不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
- 没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components (单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
这是一个文件名为 Hello.vue 的简单实例：
使用单文件组件
-
安装服务
- 安装
npm
npm全称为Node Package Manager，是一个基于Node.js的包管理器，也是整个Node.js社区最流行、支持的第三方模块最多的包管理器。npm -v- 由于网络原因 安装
cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org- 安装
vue-cli
cnpm install -g @vue/cli- 安装
webpack
webpack是JavaScript打包器(module bundler)cnpm install -g webpack - 安装
-
命令行 vue ui 启动vue cli图形化管理界面
-
新建工程
-
Package manager 选npm 默认设置
-
用hbuilder打开项目
目录结构
- public 打包之后用于部署到生产环境的目录
- src 开发目录
- components 组件目录
- HelloWord.vue 单文件组件
- App.vue
- components 组件目录
-
选择 npm run serve 运行项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0jPuawXH-1650953238664)(D:\资料\typora\前端开发\vue\image-20220324172913995.png)]
-
在控制台拿到地址复制到浏览器中进行浏览
-
新建自己的单文件组件
- template 模板/视图区域
- script 脚本区域
- style 样式区域
<template> <h2 class="red"> test...{{msg}} </h2> </template> <script> export default{ name:'test', prop:{ msg:{ type:String, default:"test msg"//默认值 } }, methonds:{ }, data(){ return { "key":value } } } </script> <style> .red { color:#ff0000; } </style> -
在App.vue中引入test.vue 并注册
<template> <div id="app"> <test msg="hi"></test>//这里msg的z </div> </template> <script> import test from './components/test.vue'//引入组件 export default{ name:'app', components:{ test//注册组件 }, } </script> <style> </style>免终端开发VUE应用
cli方式
需要终端、node、npm等知识
- 搭建项目环境
- 运行和发布项目
- 配置less/sass/typescript/babel等预编译器
- 安装各种流行的组件库
使用uni-app +HBuilder X
-
框架和ide
-
实现免终端开发
-
在创建项目是选择uni-app
目录结构
- pages 业务页面文件存放的目录
- index
- index.vue index页面
- index
- static 存放应用引用静态资源（如图片、视频）的目录，静态资源只能存放于此
- main.js Vue初始化入口文件
- App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
- manifest.json 配置应用名称、appid、logo、版本等打包信息
- pages.json 配置页面路由、导航条、选项卡等页面类信息
- components 组件
- pages 业务页面文件存放的目录
-
发行
- 发行为网站-h5手机版本
- 会自动完成打包工作
- 在控制台获取路径，将打包的结果部署到服务器上
- 发行为网站-h5手机版本
-
工具-插件安装
-
uni-app的api 提高移动端的开发效率 组件，插件市场
7616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
