浏览次数：712
点赞次数：0
评论次数：0
发布日期：2022-06-13
文章字数：7.1k
阅读时长：20.2分钟
Vue核心知识
1.1.Vue的基本简介
学习一门技术首先登陆其官网，中文网址，英文网址，vue是一款渐进式JavaScript框架，作用是为了动态构建用户界面，该框架遵循MVVM模式，编码简洁，体积小，运行效率高；他借鉴了angular的模板和数据绑定技术，借鉴了react的组件化和虚拟DOM技术，当然，该技术也存在一个Vue全家桶，例如vue脚手架：vue-cli，ajax请求：vue-resource，路由：vue-router，状态管理：vuex，图片懒加载：vue-lazyload，移动端UI组件库：min-ui，PC端组件库：element-ui，页面滑动：vue-scroller等等插件；
1.2.Vue的基本使用
<div id="app">
<input type="text" v-model="username">
<p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//创建Vue实例
const vm = new Vue({ // 配置对象
el:'#app', // element:选择器
data:{ //数据（Model）
username:'世界'
}
})
</script>
vue的HelloWord编码说明
- 使用vue首先引入Vue.js，然后创建Vue对象，其中el表示指定的
根element选择器，data是指初始化数据，双向数据绑定使用v-model，显示数据使用语法：{{xxx}}； - vue的MVVM的体现就是：
model代表模型，上述代码就是数据对象（data）,view代表视图，就是vue中的模板页面，viewModel代表是视图模型（vue实例）；
1.3.模板语法
所谓的模板就是动态的Html页面，包含了一些JS语法代码，在Vue中使用双大括号表达式和指令（以v-开头的自定义标签属性）；
双大括号表达式
语法是：{{xxx}}，作用就是向页面输出数据，可以调用对象的方法，例如{{msg.toUpperCase()}}；
指令：强制数据绑定
<body>
<div id="app">
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p>
<img src="imgSrc" alt="">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Hello Word',
imgSrc: 'http://image.luokangyuan.com/1.jpg'
}
})
</script>
</body>
上述代码中的img标签的src属性不会获取到data中定义的imgSrc属性的值，这个时候就需要使用指令强制数据绑定，功能就是指定变化的属性值，完整写法是：v-bind:src='imgSrc'，一般采用简洁写法：:src='imgSrc'；正确写法如下：
<img :src="imgSrc" alt="">
指令：绑定事件监听
<body>
<div id="app">
<button v-on:click = 'test1'>test1</button>
<button v-on:click = 'test2(msg)'>test2</button>
<button @click = 'test'>test</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
msg: 'Hello Word',
imgSrc: 'http://image.luokangyuan.com/1.jpg'
},
methods: {
test1() {
alert(123)
},
test2(content) {
alert(content)
},
test() {
alert(123)
}
}
})
</script>
</body>
绑定事件监听指令的作用就是绑定指定事件名的回调函数，完整写法：v-on:click='xxx'或者v-on:click='xxx(参数)'再或者v-on:click.enter='xxx'，简洁写法就是：@click='xxx'，使用@符号；
1.4.计算属性和监视
计算属性
在computed属性对象中定义计算属性的方法，在页面中使用{{方法名}}来显示计算的结果；
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名1（单向）：<input type="text" placeholder="姓名1" v-model="fullName1"><br>
姓名2（单向）：<input type="text" placeholder="姓名2"><br>
姓名3（双向）<input type="text" placeholder="姓名3双向">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B'
//如果将 fullName1写在这个地方，那么改变firstName和lastName的值并不会同时改变fullName1的值
// 所以需要使用到计算属性，将fullName1写入computed属性对象中，将方法的返回值作为输出值
// fullName1：'A B'
},
computed: {
// 这个f方法在初始化会执行，当相关属性发生改变时也会执行
fullName1() { // 计算属性中的一个方法，方法的返回值作为属性值
return this.firstName + ' ' + this.lastName
}
}
})
</script>
</body>
计算属性的get和set
使用计算属性实现上述的双向绑定，代码如下：
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名3（双向）<input type="text" placeholder="姓名3双向" v-model="fullName3">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B'
// fullName1：'A B'
},
computed: {
fullName3: {
// 回调函数：你定义的，你没有调用，但最终他执行了
// 回调函数，当需要读取当前属性值时回调，根据相关的数据计算并返回当前属性的值
get(){
return this.firstName + ' ' + this.lastName
},
// 回调函数，监视当前属性的变化，当属性值发生改变时回调，更新相关的属性数据
set(value){
const names = value.split(' ');
this.firstName = names[0];
this.lastName = names[1];
}
}
}
})
</script>
</body>
注意：计算属性存在缓存，多次读取只执行一次getter计算；
监视
通过vm对象的$watch()方法或者watch配置来监视某一个属性的值是否发生变化，当属性发生变化时，通过执行回调函数来执行相关的功能，下面的代码是使用计算属性完成的同一个功能，
<body>
<div id="app">
姓：<input type="text" placeholder="姓氏" v-model="firstName"><br>
名：<input type="text" placeholder="名字" v-model="lastName"><br>
姓名2（单向）：<input type="text" placeholder="姓名2" v-model="fullName2"><br>
姓名3（双向）<input type="text" placeholder="姓名3双向">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
firstName: 'A',
lastName: 'B',
fullName2: 'A B'
},
watch: {
// 这个方法就是监视firstName，值发生改变是被调用执行函数
// 函数可以传入两个参数代表新值和改变之前的值，也可以传一个，也可以不传
firstName: function(value){
this.fullName2 = value+ ' ' + this.lastName
}
}
})
vm.$watch('lastName',function(value){
this.fullName2 = this.firstName + ' ' + value
})
</script>
</body>
1.5.class和style绑定
在某些页面中，某些元素的样式是动态发生变化的，class和style绑定就是用来实现动态改变样式效果的技术，其中class绑定中，表达式可以是字符串，可以是对象，也可以是数组，实例如下：
<head>
<meta charset="UTF-8">
<title>class和style绑定</title>
<style>
.aClass{color: red}
.bClass{color: blue}
</style>
</head>
<body>
<div id="app">
<h1>class绑定</h1>
<p :class="a">我是字符串</p>
<p :class="{aClass: isA,bClass: isB}">我是对象</p> <!--class绑定的是对象。当为true才会留下-->
<h1>style绑定</h1>
<p :style="{color: activeColor, fontSize: fontSize+'px'}">我是style强制绑定</p>
<button @click='update'>更新</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
a: 'aClass',
isA: true,
isB: false ,// 以上是绑定class
activeColor: 'red', // 以下是绑定style
fontSize : 20
},
methods: {
update(){
this.a = 'bClass';
this.isA = false;
this.isB = true;// 以上是绑定class
this.activeColor = 'blue';
this.fontSize = 30;
}
}
})
</script>
</body>
1.6.条件渲染
在vue中条件渲染使用v-if、v-else和v-show指令，二者不同的地方在于v-if是不会生成不应该显示的元素，v-show是通过css控制隐藏不应该显示的节点元素，是在页面生成的，当需要频繁的切换时，使用v-show比较好，当条件不成立时，v-is的所有子节点也不会被解析；
<body>
<div id="app">
<p v-if = 'ok'>显示成功</p>
<p v-else>显示失败</p>
<p v-show = 'ok'>显示成功-v-show</p>
<p v-show = '!ok'>显示失败-v-show</p>
<button @click='ok=!ok'>切换</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
ok: false
}
})
</script>
</body>
1.7.列表渲染
列表的渲染使用的是v-for指令，可以渲染数组和对象，注意的是遍历的时候指定唯一的index或者key，另外在做数组的删除和更新操作时使用数组的变异方法，有关vue的数组变异方法可以参考官方API；
<body>
<div id="app">
<h2>v-for遍历数组</h2>
<ui>
<li v-for="(u,index) in users" ::key="index">
{{index}}===={{u.name}}===={{u.age}}==
<button @click='deleteUser(index)'>删除</button>==<button @click="updateUser(index,{name: '王八',age: 45})">更新</button>
</li>
</ui>
<h2>v-for遍历对象</h2>
<ul>
<li v-for="(value,key) in users[1]" :key="key">
{{value}}==={{key}}
</li>
</ul>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
users: [ // vue本身只是监视了users的改变，没有监视数组内部数据的改变
{name: '张三',age: 23},
{name: '李四',age: 56},
{name: '王五',age: 76},
{name: '赵六',age: 87},
{name: '陈七',age: 34}
]
},
methods: {
deleteUser(index){
this.users.splice(index,1);
},
updateUser(index,value){
// 如果只写 this.users[index] = value这一条语句，只改变了数组内部的数据，如果不调用vue的变异方法，就不会更新页面
// vue重写了数组中的一系列方法，重写后就是改变数组操作，然后重新渲染页面，也就是实现的数据绑定
this.users.splice(index,1,value) ;
}
}
})
</script>
</body>
列表渲染-列表过滤和排序
<body>
<div id="app">
<input type="text" v-model="searchName">
<ui>
<li v-for="(u,index) in filterUsers" ::key="index">
{{index}}===={{u.name}}===={{u.age}}
</li>
</ui>
<button @click="setOrderType(1)" >年龄升序</button>
<button @click="setOrderType(2)">年龄降序</button>
<button @click="setOrderType(0)">原本排序</button>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
searchName: '',
orderType: 0, // 0代表原本，1代表升序，2代表降序
users: [ // vue本身只是监视了users的改变，没有监视数组内部数据的改变
{name: '张三',age: 23},
{name: '李四',age: 56},
{name: '张五',age: 76},
{name: '赵六',age: 87},
{name: '陈七',age: 34}
]
},
computed: {
filterUsers() {
const {searchName,users,orderType} = this;// 取到相关数据（searchName和users）
let fusers; // 定义最终返回的数组
fusers = users.filter(u => u.name.indexOf(searchName) !==-1);// 对users进行过滤
// 对fusers排序
if(orderType !== 0){
fusers.sort(function(u1,u2){ // 如果返回负数p1在前，返回正数p2在前
// 1.代表升序,2.代表降序
if(orderType == 2){
return u2.age - u1.age
}else{
return u1.age -u2.age
}
})
}
return fusers;
}
},
methods: {
setOrderType(value){
this.orderType = value;
}
}
})
</script>
</body>
1.8.事件处理
在vue中绑定监听使用@xxx='fun',其中点击函数和传参数和不传参数，默认事件的形参是event,当需要传参的同时需要默认event时候，使用隐含属性对象@xxx = fun(123,$event)；事件有两个修饰符：.prevent：阻止事件的默认事件的默认行为和.stop：停止事件冒泡；按键修饰符使用keyup.keyCode = fun()：keycode是键盘输入对应的ketcode值，可以使用名称，但是存在一部风没有；
<body>
<div id="app">
<h2>绑定监听</h2>
<button @click="test1" >我是按钮一</button>
<button @click="test2('Hello 码酱')">我是按钮二，我想获取自己传入的值</button>
<button @click="test3">我是按钮三，我就想获取自己</button>
<button @click="test4('Hello',$event)">我是按钮四，我想获取获取自己的同时获取传入的值</button>
<h2>事件修饰符：事件冒泡和事件默认行为</h2>
<div style="width: 200px; height: 200px; background: red" @click="test5">
<!-- 使用 @click.stop阻止事件的冒泡-->
<div style="width: 100px; height: 100px; background: blue" @click.stop="test6"></div>
</div>
<!-- 使用@click.prevent阻止事件的默认行为 -->
<a href="luokangyuan.com" @click.prevent="test7">去码酱博客</a>
<h2>按键修饰符：使用@keyup.13，其中的数字代表键盘每一个输入对应的keycode</h2>
<input type="text" @keyup.13="test8">
<input type="text" @keyup.enter="test8">
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: '#app',
methods: {
test1(){
alert("四川码酱");
},
test2(msg){
alert(msg);
},
test3(event){
alert(event.target.innerHTML);
},
test4(msg,event){
alert(msg+"==="+event.target.innerHTML);
},
test5(){
alert("执行了外面的div的点击事件");
},
test6(){
alert("执行了里面的div的点击事件");
},
test7(){
alert("不去码酱博客")
},
test8(event){
alert(event.target.value);
}
}
})
</script>
</body>
1.9.表单输入绑定
表单的数据绑定使用v-model指令，具体相关编码如下：
<body>
<div id="app">
<form action="/xxx" @submit.prevent="handSubmit">
<span>用户名：</span>
<input type="text" v-model="userName">
<br>
<span>密码：</span>
<input type="password" v-model="pwd">
<br>
<span>性别：</span>
<input type="radio" id="wman" value="女" v-model="sex">
<label for="wman">女</label>
<input type="radio" id="man" value="男" v-model="sex">
<label for="man">男</label>
<br>
<span>爱好：</span>
<input type="checkbox" id="basket" value="basket" v-model="likes">
<label for="basket">篮球</label>
<input type="checkbox" id="footbal" value="foot" v-model="likes">
<label for="footbal">足球</label>
<input type="checkbox" id="pingpang" value="pingpang" v-model="likes">
<label for="pingpang">乒乓球</label>
<br>
<span>城市：</span>
<select name="" id="" v-model="cityId">
<option value="">未选择</option>
<option :value="city.id" v-for="(city,index) in allCitys" :key="index">{{city.name}}</option>
</select>
<br>
<span>个人介绍：</span>
<textarea name="" id="" cols="30" rows="10" v-model="desc"></textarea>
<br>
<input type="submit" value="注册">
</form>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
userName: '',
pwd: '',
sex: '男', // 默认选中性别男
likes: ['foot'], // 默认选中foot对应的多选框
allCitys: [{ id: 1, name: "北京" }, { id: 2, name: "成都" }, { id: 3, name: "上海" }, { id: 4, name: "宁波" }],
cityId: '',// 这里默认是空，则匹配未选择，如果默认选中成都，则写2即可
desc: ''
},
methods: {
handSubmit() {
console.log(this.userName, this.pwd, this.sex, this.likes, this.cityId, this.desc)
}
}
})
</script>
</body>
1.10.Vue的生命周期
常用的生命周期方法：create()/mounted():常用于发送Ajax请求启动定时器等异步任务，beforeDestory()：常用于做一些收尾工作，例如关闭定时器；
<body>
<div id="app">
<button @click= "destoryVm">点击我取消Vue实例</button>
<p v-show = "isShow">我是四川码酱</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
isShow: true
},
beforeCreate() {
console.log("我是beforeCreate方法，我被执行了");
},
created() {
console.log("我是created方法，我被执行了");
},
beforeMount() {
console.log("我是beforeMount方法，我被执行了");
},
mounted(){ // 初始化显示之后立即调用，也是执行一次
this.intervalId = setInterval(() =>{
console.log("=====");
this.isShow = !this.isShow;
}, 1000)
},
beforeUpdate() {
console.log("我是beforeUpdate方法，我被执行了");
},
updated() {
console.log("我是updated方法，我被执行了");
},
beforeDestroy() { // 死亡之前回调一次
// 清除定时器
clearInterval(this.intervalId)
},
destroyed() {
console.log("我是destroyed方法，我被执行了");
},
methods: {
destoryVm(){
this.$destroy();
}
}
})
</script>
</body>
说明：
beforeCreate、created、beforeMount、mounted初始化方法只执行一次，beforeUpdate、updated执行多次，beforeDestroy、destroyed死亡方法，也执行一次；
1.11.过渡和动画
在vue中动画就是操作css的trasition或者animation属性，vue会给目标元素添加和移除指定的class，只不过要遵循一定的命名规则，
<title>动画和过渡</title>
<style type="text/css">
/* 指定显示和隐藏的过渡效果 */
.fade-enter-active,
.fade-leave-active {
transition: opacity 1s;
}
/* 指定隐藏的样式 */
.fade-enter,
.fade-leave-to {
opacity: 0;
}
/* 指定显示的过滤效果 */
.move-enter-active {
transition: all 1s
}
/* 指定隐藏的过滤效果 */
.move-leave-active {
transition: all 3s
}
/* 指定隐藏的样式 */
.move-enter,
.move-leave-to {
opacity: 0;
transform: translateX(20px)
}
</style>
</head>
<body>
<div id="app">
<button @click="isshow = !isshow">动画按钮</button>
<transition name="fade">
<p v-show="isshow">四川码酱</p>
</transition>
</div>
<div id="app1">
<button @click="isshow = !isshow">多属性动画按钮</button>
<transition name="move">
<p v-show="isshow">四川码酱</p>
</transition>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data() {
return {
isshow: true
}
}
})
new Vue({
el: "#app1",
data() {
return {
isshow: true
}
}
})
</script>
</body>
1.12.过滤器
在vue中允许自定义过滤器，所谓过滤器就是：对要显示的数据进行特定格式化后在显示，例如时间格式化等，注意的是：并没有改变原本的数据，只是产生新的对应数据；
<body>
<div id="app">
<p>当前完整时间为：{{data | dateString}}</p>
<p>当前日期为：{{data | dateString('YYYY-MM-DD')}}</p>
<p>当前时间为：{{data | dateString('HH:mm:ss')}}</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/moment.js/2.22.1/moment.js"></script>
<script type="text/javascript">
// 自定义过滤器
Vue.filter('dateString',function(value,format){
return moment(value).format(format || 'YYYY-MM-DD HH:mm:ss')
})
new Vue({
el: "#app",
data: {
data: new Date()
}
})
</script>
</body>
1.13.内置指令和自定义指令
常用的内置指令
- v:text : 更新元素的 textContent
- v-html : 更新元素的 innerHTML
- v-if : 如果为 true, 当前标签才会输出到页面
- v-else: 如果为 false, 当前标签才会输出到页面
- v-show : 通过控制 display 样式来控制显示/隐藏
- v-for : 遍历数组/对象
- v-on : 绑定事件监听, 一般简写为@
- v-bind : 强制绑定解析表达式, 可以省略 v-bind
- v-model : 双向数据绑定
- ref : 指定唯一标识, vue 对象通过$els 属性访问这个元素对象
- v-cloak : 防止闪现出现
{{xxx}}, 与 css 配合: [v-cloak]
<title>内置指令</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<p ref="content">四川码酱</p>
<button @click = "hint">提示</button>
<p v-cloak>{{msg}}</p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
msg: "Hello 四川码酱"
},
methods: {
hint(){
alert(this.$refs.content.textContent);
}
}
})
</script>
</body>
说明：
v-cloak指令是为了页面加载数据缓慢时候显示{{xxx}}标签而出了一个指令，与CSS搭配使用
自定义指令
注册全局指令，方法如下：
Vue.directive('my-directive', function(el, binding){
el.innerHTML = binding.value.toupperCase()
})
注册局部指令，方法如下：
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
<body>
<div id="app">
<p v-upper-text="msg"></p>
<p v-lower-text="msg"></p>
</div>
<script src="js/vue.js" type="text/javascript"></script>
<script type="text/javascript">
// 定义全局指令
// el：指令属性所在的标签属性
// binding：包含指令相关信息数据的对象
Vue.directive('upper-text', function(el,binding){
el.textContent = binding.value.toUpperCase()
console.log(el,binding)
})
new Vue({
el: "#app",
data: {
msg: "This is my think life"
},
directives: { // 使用自定义局部指令
'lower-text' : function(el,binding){
el.textContent = binding.value.toLowerCase()
}
}
})
</script>
</body>
1.14.核心知识总结
- Vue是前端开发库，用于构建用户界面，遵循MVVM模式，编码简洁，体积小，效率高，包含了一些列插件库；
- 基本使用：引入vue.js，创建vue实例对象，其中el代表dom标签选择器，data代表初始化数据对象；
el：指定dom标签容器的选择器，一般写一个根标签；data：对象或者函数类型，指定初始化状态属性数据的对象，页面中可以使用{{xxx}}直接访问methods：包含多个方法的对象，供页面中的事件指令来回调，回调函数默认有$event参数，也可以指定自己的参数，在方法中，访问data中的属性直接使用this.xxx；computed：计算属性，包含多个方法的对象，对状态属性进行计算处理后返回给页面一个新的数据，使用get和set方法实现属性的计算读取，同时监视数据的变化；watch：监视，包含多个属性监视的对象，xxx.function(value){}，可以传入两个参数，代表新值和改变前的值，也可以使用vm.$watch('xxx', function(value){})的方式添加监听；- vue中的过渡和动画，实质就是vue操作css的transition/animation属性；
- 生命周期：常用的钩子函数是
created() / mounted(): 启动异步任务(启动定时器,发送ajax请求, 绑定监听)和beforeDestroy(): 做一些收尾的工作例如清除定时器等； - 自定义过滤器：使用的是
Vue.filter(filterName,function(value){})，在页面使用方法：{{myData | filterName(arg)}}，参数可传可不传； - vue内置指令：
v-for遍历、@绑定事件、v-model数据双向绑定、ref标识标签； - 自定义指令：使用
Vue.directive注册全局指令，使用directives注册局部指令；
注意：数据在哪个组件，更新数据的行为（方法）就应该定义在那个组件中
二、Vue组件化编码方式
2.1.使用vue-cli创建模板项目
vue-cli是vue官方提供的脚手架工具，首先确认安装了node和npm，最好安装一个cnpm，使用方法如下：
- npm install -g vue-cli
- vue init webpack vue_demo 其中 vue_demo是项目名
- cd vue_demo
- npm install或者npm run dev
项目结构说明
- build : webpack 相关的配置文件夹(基本不需要修改)
- dev-server.js : 通过 express 启动后台服务器
- config: webpack 相关的配置文件夹(基本不需要修改)
- index.js: 指定的后台服务的端口号和静态资源文件夹
- src : 源码文件夹
- components: vue 组件及其相关资源文件夹
- App.vue: 应用根主组件
- main.js: 应用入口 js
- static: 静态资源文件夹
- .babelrc: babel 的配置文件
- .eslintignore: eslint 检查忽略的配置
- .eslintrc.js: eslint 检查的配置
- .gitignore: git 版本管制忽略的配置
- index.html: 主页面文件
- package.json: 应用包配置文件
- README.md: 应用描述说明的 readme 文件
简单的使用Vue模板项目
首先，我们编写了一个HelloWord的组件，
<template>
<div class="hello">
<h1 class="msg">{{ msg }}</h1>
</div>
</template>
<script>
export default {
// 配置对象和Vue一致
data() {
// data可以 写对象和函数，但是在组件中必须使用函数
return {
msg: "Hello Welcome to My Vue"
};
}
};
</script>
<style scoped>
.msg {
color: red
}
</style>
然后，我们在App.vue中使用我们自己定义的组件
<template>
<div id="app">
<img class="logo" src="./assets/logo.png">
<!-- 使用组件标签 -->
<HelloWorld/>
</div>
</template>
<script>
// 1.引入需要使用的vue组件（HelloWoed组件）
import HelloWorld from './components/HelloWorld'
export default {
components: { // 2.映射组件标签
HelloWorld
}
}
</script>
<style>
.logo{
width: 100px;
height: 100px;
}
</style>
我们知道使用Webpack打包后会生成一个js文件，也就是入口文件main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
new Vue({
el: '#app', // 挂载到入口Dom节点（index.html）
components: { App }, // 映射组件标签
template: '<App/>' //使用标签
})
2.2.项目打包发布方式
打包命令：npm run build
使用静态服务器：安装命令：npm install -g serve，发布命令：serve dist，然后直接访问就可以了
使用动态web服务器（Tomcat）:修改webpack.prod.conf.js，加入output: {publicPath: '/xxx/' //打包文件夹的名称}，然后重新打包，将dis文件夹的名称改为项目名称，放在tomcat的webapp目录下，访问即可；