Vue的基础学习
Vue的基础学习
- Vue实例的创建
- 挂载点、模板、实例之间的关系
- vue实例中的数据、事件和方法
- 属性绑定和双向数据绑定
- 属性绑定
- 双向数据绑定
- 计算属性和侦听器
- v-if,v-show,v-for
- v-for列表的渲染
- TodoList功能
- TodoList使用组件的方式改写
- 全局注册TodoList组件与使用
- 局部组件的注册与使用
- 组件与实例的关系
- todolist的删除
- Vue-cli
- 改写todolis
- 全局样式与局部样式
- class与style绑定
- class的绑定
- style绑定
- 事件
Vue实例的创建
<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元素
代码如下：
<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>
模板：
指定了模板，那就会覆盖默认的模板而使用指定的
<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:'{{msg}}
',//指定模板
data:{
msg:'Hello World'
}
});
script>
body>
html>
页面显示
vue实例中的数据、事件和方法
加载数据的方法：
1、插值表示 {{}}
2、v-text:将内容进行转义
3、v-html：不会转义
事件：
写在Vue实例下的methods方法下
v-on:click=“handleClick” 或者 @click=“handleClick”
<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:"hello
"
},
methods:{
handleClick:function(){
this.content="word";
}
}
});
script>
body>
html>
属性绑定和双向数据绑定
属性绑定
属性绑定v-bind:属性名
v-bind:title也可以简写为:title
代码如下：
<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 worlddiv>
<input :value="title"/>
div>
<script>
new Vue({
el:'#root',
data:{
title:'this is hello world'
}
});
script>
body>
html>
页面显示
鼠标放上去显示this is hello world
双向数据绑定
使用v-model
<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 来监听响应数据的变化
<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的区别与介绍
<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">togglebutton>
<div v-show="hide">v-show的显示与隐藏div>
<button @click="hideToggle">v-show的togglebutton>
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列表的渲染
vue官网的介绍
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="js/vue.js" >script>
head>
<body>
<div id="root">
<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功能
<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组件与使用
<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>
/* 全局组件的定义 */
Vue.component('todo-list',{
template:'item '
});
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
methods:{
handleSubmit:function(){
}
}
});
script>
body>
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:'item '
};
new Vue({
el:'#root',
data:{
inputValue:'',
list:[]
},
/*注册局部组件*/
components:{
//组件名称：组件内容
'todo-list':toDoList
},
methods:{
handleSubmit:function(){
}
}
});
script>
body>
html>
使用全局注册组件的方式改写todolist
<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:'{{content}} ',
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的删除
<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:'{{content}} {{index}} ',
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>
<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名称一样时进行区分，防止全局污染
class与style绑定
class的绑定
- 绑定单个class
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js">
script>
head>
<body>
<div id="app">
<div :class="{red:isRed}">hi vuediv>
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之间用逗号,隔开
代码如下：
<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 vuediv>
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
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js">script>
head>
<body>
<div id="app" :class="['green']">hellodiv>
<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样式
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js">script>
head>
<body>
<div id="app" :class="isActive?'red':''">1div>
<script>
/* 2.创建Vue实例*/
new Vue({
el:'#app',
data:{
isActive:true
}
});
script>
<style type="text/css">
.red{
color: #FF0000;
}
style>
body>
html>
style绑定
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js">script>
head>
<body>
<div :style="{color:'hotpink',fontSize:'32px'}" id="app">hellodiv>
<script>
/*1.实例化Vue对象*/
new Vue({
el:'#app'
});
script>
body>
html>
页面样式
事件
<html>
<head>
<meta charset="utf-8">
<title>title>
<script src="vue.js">script>
head>
<body>
<div id="app">
<button @click="greet('abc',$event)" >greetbutton>
<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>