Vue的基础学习
Vue实例的创建
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script type="text/javascript">
/* 通过new Vue({});创建Vue的实例 */
new Vue({
el:'#root',//绑定页面元素(挂载点)
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>
挂载点、模板、实例之间的关系
挂载点:vue实例中el绑定的dom元素
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:'#root',//绑定页面元素(挂载点)
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>
模板:
指定了模板,那就会覆盖默认的模板而使用指定的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">{{msg}}</div>
<script>
new Vue({
el:'#root',
//{{}}:vue的插值表达式
template:'<h1>{{msg}}</h1>',//指定模板
data:{
msg:'Hello World'
}
});
</script>
</body>
</html>
页面显示
vue实例中的数据、事件和方法
加载数据的方法:
1、插值表示 {{}}
2、v-text:将内容进行转义
3、v-html:不会转义
事件:
写在Vue实例下的methods方法下
v-on:click=“handleClick” 或者 @click=“handleClick”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="root">
<h1 v-text="content"></h1>
<div v-html="content" @click="handleClick"></div>
</div>
<script>
new Vue({
el:'#root',
data:{
msg:'Hello World',
number:123,
content:"<h1>hello</h1>"
},
methods:{
handleClick:function(){
this.content="word";
}
}
});
</script>
</body>
</html>
属性绑定和双向数据绑定
属性绑定
属性绑定v-bind:属性名
v-bind:title也可以简写为:title
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>属性绑定和双向数据绑定</title>
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<div id="root">
<div :title="title">hello world</div>
<input :value="title"/>
</div>
<script>
new Vue({
el:'#root',
data:{
title:'this is hello world'
}
});
</script>
</body>
</html>
页面显示
鼠标放上去显示this is hello world
双向数据绑定
使用v-model
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<div id="root">
<input v-model="title"/>
<div>{{title}}</div>
</div>
<script>
new Vue({
el:'#root',
data:{
title:'this is hello world'
}
});
</script>
</body>
</html>
页面显示
input输入框内容发送变化时,div内容也自动发生变化
计算属性和侦听器
计算属性都以函数的形式写在 Vue 实例内的 computed 选项内,最终返回计算后的结果。
computed 是有缓存的,如果属性值没有发生变化,直接返回缓存中存储的数据
当遍历大数组和做大量计算时,应当使用计算属性,除非不希望得到缓存;
当需要数据实时发生变化时,适合用 methods
监听属性实验使用 watch,可以通过 watch 来监听响应数据的变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>计算属性与侦听器</title>
<script src="js/vue.js" charset="utf-8"></script>
</head>
<body>
<div id="root">
姓:<input v-model="firstname">
名<input v-model="lastname" />
<div>{{fullName}}</div>
<div>{{count}}</div>
</div>
<script>
new Vue({
el: '#root',
data: {
firstname: '',
lastname: '',
count: 0
},
//计算属性
computed: {
fullName: function() {
return this.firstname + " " + this.lastname;
}
},
//监听器
watch: {
/* 监听属性fullName */
fullName:function(){
return this.count++;
}
}
});
</script>
</body>
</html>
页面显示
v-if,v-show,v-for
v-if指令的参数为true,所在的元素显示,否则则不显示
v-if:式对dom元素的重建与销毁
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性:display
vue官网对v-if和v-show的区别与介绍
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="root">
<div v-if="show">v-if的显示与隐藏</div>
<button @click="toggle">toggle</button>
<div v-show="hide">v-show的显示与隐藏</div>
<button @click="hideToggle">v-show的toggle</button>
</div>
<script type="text/javascript">
new Vue({
el: '#root',
data: {
show: true,
hide:true
},
methods: {
toggle: function() {
this.show=!this.show;
},
hideToggle:function(){
this.hide=!this.hide;
}
}
});
</script>
</body>
</html>
页面显示:
点击toggle按钮,页面v-if所在的dom元素被移除,只显示
如下视图:
点击v-show的toggle按钮,v-show所在的dom元素只是添加css属性display:none;
v-for列表的渲染
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<!-- item 则是被迭代的数组元素的别名。
index,数组下标的索引,
arr:被遍历的对象或数组
:key:便于对数组进行排序,并且会移除key中不存在的元素
-->
<li v-for="(item,index) in arr" :key="item">{{item}}</li>
</div>
<script>
new Vue({
el:'#root',
data:{
arr:[1,2,3]
}
});
</script>
</body>
</html>
页面显示
TodoList功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputVaule">
<button @click="submit">提交</button>
<button @click="del(inputVaule)">删除</button>
</div>
<ul>
<li v-for="(item,index) in arr" :key="index">{{item}}</li>
</ul>
</div>
<script>
new Vue({
el:'#root',
data:{
inputVaule:'',
arr:[]
},
methods:{
submit:function(){
this.arr.push(this.inputVaule);
this.inputVaule='';
},
del(inputVaule){
this.arr.pop(inputVaule);
this.inputVaule='';
}
}
});
</script>
</body>
</html>
页面显示:
输入框输入1,点击提交按钮,页面显示如下:
输入框输入1,点击删除按钮,页面显示如下:
TodoList使用组件的方式改写
全局注册TodoList组件与使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--使用全局组件todo-list-->
<todo-list></todo-list>
</ul>
</div>
<script>
/* 全局组件的定义 */
Vue.component('todo-list',{
template:'<li>item</li>'
});
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
}
}
});
</script>
</body>
</html>
局部组件的注册与使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!--使用组件-->
<todo-list></todo-list>
</ul>
</div>
<script>
/* 局部组件的定义 */
var toDoList={
template:'<li>item</li>'
};
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
/*注册局部组件*/
components:{
//组件名称:组件内容
'todo-list':toDoList
},
methods:{
handleSubmit:function(){
}
}
});
</script>
</body>
</html>
使用全局注册组件的方式改写todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 通过属性传递值 -->
<todo-list v-for="(item,index) of list" :key="index" :content="item">
{{item}}
</todo-list>
</ul>
</div>
<script>
/* 全局组件的定义 */
Vue.component('todo-list',{
template:'<li>{{content}}</li>',
props:['content']//接收从外部传递过来的值
});
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
}
}
});
</script>
</body>
</html>
页面样式:
输入框输入12,点击提交按钮,输入框内容被清空,下方显示列表12,如下图
组件与实例的关系
每个组件都是一个Vue的实例,里面也可以进行方法的定义
每个vue实例就是组件
todolist的删除
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/vue.js" ></script>
</head>
<body>
<div id="root">
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 通过属性传递值 -->
<todo-list v-for="(item,index) of list" :key="index" :content="item" :index="index"
@delete="handleDelete">
{{item}}
</todo-list>
</ul>
</div>
<script>
/* 全局组件的定义 */
Vue.component('todo-list',{
props:['content','index'],//接收从外部传递过来的值
/* @click='del',绑定的是组件上的方法,所以方法是在组件的methods:中定义的 */
template:'<li @click="del">{{content}} {{index}}</li>',
methods:{
del:function(){
/* this.$emit()触发当前实例上的事件。附加参数都会传给监听器回调 */
this.$emit('delete',this.index);
}
}
});
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
this.list.push(this.inputValue);
this.inputValue='';
},
handleDelete:function(index){
this.list.splice(index,1);
}
}
});
</script>
</body>
</html>
页面显示如下:
输入框输入值,点击提交按钮,页面显示如下:
点击列表项,当前列表项删除,
Vue-cli
vue脚手架工具,快速完成vue工程级的开发
- 全局安装vue-cli
npm install --gloabal vue-cli
- 创建一个基于webpack模板的新项目
vue init webpack my-project
3. 安装依赖,运行项目
cd my-project
npm run dev
4、也可以输入如下命令,运行项目
npm run start
文档结构图:
程序的入口文件时文件目录下src文件夹下的main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
//引入组件
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
//实例化Vue对象
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
- 以.vue结尾的vue单文件里面,必须有一个根元素包裹所有的元素
- 在vue-cli开发的项目中data不再是对象的形式而是函数的形式
<script>
new Vue({
el:'#root',
data:{//data在Vue实例中,以对象的形式展现
}
})
</script>
<style>
</style>
<template>
<div>
<div>
<input/>
<button>提交</button>
</div>
<ul>
<li></li>
</ul>
</div>
</template>
<script>
export default{
//在vue脚手架创建的vue项目中,data以函数的形式展现
data:function(){
return {
}
}
}
//可以简写为以下方式(在ES6语法中,简写成如下方式)
data(){
return {
}
}
</script>
<style>
</style>
改写todolis
TodoItem.vue
<template>
<div>
<li @click="handleDelete">
{{content}}
</li>
</div>
</template>
<script>
export default {
props:['content','index'],//定义接受父组件的属性content,index
methods:{
handleDelete(){
//子组件触发delete事件,父组件需要监听这个事件
this.$emit('delete',this.index);
}
}
}
</script>
<style>
</style>
TodoList.vue
<template>
<div>
<div>
<input v-model="inputValue"/>
<button @click="handleSubmit">提交</button>
</div>
<ul>
<!-- 3.引用局部组件-->
<!-- 父组件监听到子组件的delete事件之后,执行handleDelete-->
<todo-item v-for="(item,index) in list" :content="item" :index="index" :key="index" @delete="handleDelete"></todo-item>
</ul>
</div>
</template>
<script>
//1.引入组件
import TodoItem from './components/TodoItem.vue'
export default{
//在vue脚手架创建的vue项目中,data以函数的形式展现
data:function(){
return{
inputValue:'',
list:[]//定义数组
}
},
components:{
//2.注册组件
//将局部组件注册到页面中
/* todo-item标签对于TodoItem标签*/
'todo-item':TodoItem
},
methods:{
handleSubmit(){
this.list.push(this.inputValue);//将输入的inputValue的值添加到数组中
this.inputValue='';//清空inputValue的值
},
handleDelete(index){
this.list.splice(index,1);//删除当前项
}
}
}
</script>
<style>
</style>
文件结构:
全局样式与局部样式
scoped:css作用域作用于当前页面或组件,用来区分在子组件和父组件.class名称一样时进行区分,防止全局污染
<style scoped>
</style>
class与style绑定
class的绑定
- 绑定单个class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js">
</script>
</head>
<body>
<div id="app">
<!--2.:class绑定样式,:class="{样式名称:变量名}"
变量名的值为true为绑定,false为不绑定样式
-->
<div :class="{red:isRed}">hi vue</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
//3.变量名
isRed:true
}
});
</script>
<style type="text/css">
/*1.声明样式*/
.red{
width: 200px;
height: 200px;
background-color: #FF0000;
line-height: 200px;
text-align: center;
color: #FFF;
}
</style>
</body>
</html>
页面效果:
- 绑定多个class样式,class之间用逗号,隔开
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js">
</script>
</head>
<body>
<div id="app">
<div :class="{red:isRed,green:isRed}">hi vue</div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
isRed:true
}
});
</script>
<style type="text/css">
.red{
width: 200px;
height: 200px;
background-color: #FF0000;
line-height: 200px;
text-align: center;
color: #FFF;
}
.green{
font-size: 32px;
}
</style>
</body>
</html>
页面样式
3.绑定数组形式的class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- 3.绑定class属性 -->
<div id="app" :class="['green']">hello</div>
<style type="text/css">
.green{
color: #00FF00;
font-size: 30px;
}
</style>
<script type="text/javascript">
/* 2.创建vue的实例 */
new Vue({
el:'#app'
});
</script>
</body>
</html>
页面样式:
4.通过条件运算绑定class样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<!-- :class条件运算绑定class -->
<div id="app" :class="isActive?'red':''">1</div>
<script>
/* 2.创建Vue实例*/
new Vue({
el:'#app',
data:{
isActive:true
}
});
</script>
<style type="text/css">
.red{
color: #FF0000;
}
</style>
</body>
</html>
style绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js"></script>
</head>
<body>
<!--:style绑定样式,:style="{样式名称:'属性值',样式名称:'属性值'}"-->
<div :style="{color:'hotpink',fontSize:'32px'}" id="app">hello</div>
<script>
/*1.实例化Vue对象*/
new Vue({
el:'#app'
});
</script>
</body>
</html>
页面样式
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 1.引入vue.js -->
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!-- @dblclick:双击事件
@click:单机事件
访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
-->
<button @click="greet('abc',$event)" >greet</button>
<button @dblclick="add(1)">双击事件</button>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
},
methods:{
greet:function(str,e){
alert(str);
confirm(e);
},
add:function(str){
confirm(str);
}
}
})
</script>
</body>
</html>