vue学习笔记一（v-bind，v-on，v-model，v-if ，动画transition，组件 ，ref 属性）有详细的案列
一、vue的学习官网
vue的学习网站
二、进入正题，开始介绍vue的具体用法。
1、如何引入vue.js 文件
- 可以直接引入vue的连接例如
- 可以下载vue的jar包，放到项目的路径中，直接引用放置的地址就行。
2、v-bind 和 v-on 的使用
- v-bind 是绑定属性 可以简写为 :
- v-on 是时间绑定 ，可以简写为 @
具体的用法：
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<title>Document</title>
<style>
.red {
background: red;
}
.green {
background: green;
}
.yellow {
background: yellow;
}
.width {
width: 300px;
}
.height {
height: 20px;
}
.a {
font-size: 30px;
height: 185px;
}
</style>
</head>
<body>
<div id="app2">
<img v-bind:src="imgUrl" alt="这里是图片,对,就是这样哈哈哈哈" />
<h4 :class="[Class , h4Width]"> {{message}}</h4>
<!-- 当有多个;class时，他只会识别第一个，后面不管有几个：class都不会别识别-->
<!-- 当有多个class时，可以使用数组或者是对象 -->
<h4 :class="[{green:true},h4Height,h4Width]">{{message1}}</h4>
<!-- 还可以在：class后面加 class，他两互相没有关系 -->
<h4 :class="[{green:true},h4Height,h4Width]" class='a'>{{message1}}</h4>
<!-- 还可以在标签中设置样式 -->
<img v-bind:src="imgUrl" alt="这里是图片,对,就是这样哈哈哈哈" :style="{width:imgWidth,border:'10px solid red'}" />
<!-- 点击事件的验证 -->
<button @click="dealOnclick">点击切换背景颜色</button>
<h4 :class="h4ClassArr[index]" class='a'>{{message2}}</h4>
</div>
<script>
var app2 = new Vue({
el: "#app2",
data: {
message: "这里练习v-bind特性的属性",
message1: "验证class的数组和对象的使用",
message2: "点击事件的验证",
imgUrl: "http://img5.imgtn.bdimg.com/it/u=3916481728,2850933383&fm=26&gp=0.jpg",
h4Class: 'red',
h4Width: 'width',
h4Height: 'height',
imgWidth: '200px',
index: 0,
count: 0,
h4ClassArr: ['red', 'green', 'yellow']
},
/* 这里是存放方法的地方 */
methods: {
dealOnclick() {
this.index = this.count++ % 3
}
}
})
</script>
</body>
</html>
3、v-if v-else-if v-else 可以一快使用，进行条件控制 v-show的使用
- v-if 和 v-show的区别
v-show 是控制dom的样式的显示与隐藏，就是间接的改变display的值，
v-if 是控制dom的是添加和移除，频切换显示和隐藏时，要使用v-show,只进行一次判断时用v-if
v-show不可以在template标签中使用
实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>v-if的使用</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
.red{
background: red;
}
.green{
background: green;
}
.box{
height: 100px;
width: 100px;
}
.pink{
background: pink;
}
</style>
</head>
<body>
<!-- v-if v-else-if v-else 的使用-->
<div id="app">
<button @click="dealOnclick">{{text}}</button>
<div class="box red" v-if="num===0"></div>
<div class="box green" v-else-if="num===1"></div>
<div class="box pink" v-else=""></div>
</div>
<!-- v-if v-else 的使用 -->
<div id="app1">
<button @click="dealOnclick">{{text}}</button>
<div class="box red" v-if="show"></div>
<div class="box pink" v-else=""></div>
<button @click="dealOnclick">{{text}}</button>
<!-- <template>标签的使用，他可以批量的处理标签，他是一个虚拟的容器 -->
<template v-if="show">
<div class="green box"></div>
<div class="red box"></div>
</template>
<button @click="dealOnclick">{{text}}</button>
v-show 的使用说明
<!-- v-show 是控制dom的样式的显示与隐藏，就是间接的改变display的值，
v-if 是控制dom的是添加和移除，
频切换显示和隐藏时，要使用v-show,只进行一次判断时用v-if
v-show不可以在template标签中使用 -->
<div class="green box" v-show="show"></div>
<div class="red box" v-if="show"></div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true,
text: "隐藏",
num: 0
},
methods: {
dealOnclick() {
this.show = !this.show;
this.text = this.show ? '隐藏' : '显示';
}
}
})
var app1 = new Vue({
el: "#app1",
data: {
show: true,
text: "隐藏",
},
methods: {
dealOnclick() {
this.show = !this.show;
this.text = this.show ? '隐藏' : '显示';
}
}
})
</script>
</body>
</html>
4、v-for的使用、
- 对集合进行遍历渲染
- 实例
<body>
<div id="app">
<ul>
<li v-for="item in arr">{{item}}</li> <!-- 输出数组中的元素值-->
</ul>
<ul>
<li v-for="people in obj">{{people}}</li> <!-- 输出对象的属性-->
</ul>
<ul>
<li v-for="item in 'shanghai' "> {{item}}</li> <!-- 输出每个字符-->
</ul>
<ul>
<li v-for="item in 10">{{item}}</li><!-- 输出1到10 的数字 -->
</ul>
<ul>
<li v-for="(item,index) in fruitArr" :key="index">{{item}}——————{{index}}</li><!-- 输出元素值和元素的索引 -->
</ul>
<button @click="dealclick">点击反转</button>
<button @click="dealclick1">点击隐藏</button><br />
<div v-if="show">用户名<input type="text" key="name" /></div>
<div v-else="">密码<input type="text" key="pass"/></div>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
arr: ["苹果", "香蕉", "葡萄"],
obj: {
name: "张三",
age: 18,
looks: "beautiful"
},
fruitArr: ["樱桃", "芒果", "菠萝"],
show : true
},
methods:{
dealclick(){
this.fruitArr.reverse();
},
dealclick1(){
this.show = !this.show;
}
}
})
</script>
</body>
注：
对数组进行操作
1、不能通过索引的方式更改数组，这样不能渲染
2、不能通过更改数组的长度更改数组，这样不能渲染
3、更改数组要是用数组的变异方法 pop shift unshift splice sort reverse push
4、向对象内添加和删除属性不能渲染页面可以使用$set()方法向对象中添加属性
实例
var app2 = new Vue({
el: "#app2",
data: {
arr: ["小哈", "小黑", "小白"],
people: {
name: "hengheng",
age: 23,
looks: "handsome"
}
},
methods: {
insertElement() {
const len = this.arr.length;
this.arr.push("呵呵呵呵呵");
this.arr.push(this.people);
this.$set(this.people, "salary", 154654);
},
inertFiled() {
/* 这种情况不会被渲染 */
//delete this.people.name;
//this.people.salary = 125525;
/* 这种情况可以渲染 */
this.$set(this.people, "salary", 1578648);
}
}
})
<div id="app2">
<button @click="insertElement"> 添加 </button>
<ul>
<li v-for="item in arr">{{item}}</li>
</ul->
<button @click="inertFiled">添加属性</button>
<ul>
<li v-for="item in people">{{item}}</li>
</ul->
</div>
5、v-model的使用，双向数据绑定
- 实例
<div id="app">
<input type="text" :value="value" @input="dealInput"/><span>{{value}}</span>
</div>
<!-- 使用，v-model对象 -->
<div id="app2">
<input type="text" v-model="value" /><span>{{value}}</span>
<br />
<textarea v-model="content"></textarea><span>{{content}}</span>
<br />
第一项：<input type="checkbox" value="哈哈哈" v-model="checkArr"/>
第二项：<input type="checkbox" value="恩门" v-model="checkArr"/>
第三项：<input type="checkbox" value="啊啊啊" v-model="checkArr"/>
<span>{{checkArr}}</span>
<!-- 下拉框中使用标签 -->
<select v-model="selectValue" >
<option>请选择</option>
<option>北京</option>
<option>上海</option>
<option>深圳</option>
</select>
<span>{{selectValue}}</span>
</div>
<script type="text/javascript">
const app = new Vue({
el:"#app",
data:{
value:""
},
methods:{
dealInput(e){
this.value = e.target.value;
}
}
})
const app2 = new Vue({
el:"#app2",
data:{
value:"jiangheng",
content:"",
checkArr:[],
selectValue:""
},
methods:{
}
})
</script>
6、计算属性和侦听器的使用
- 实例
<body>
<div id="app">
姓名:{{name}} 年龄 ： {{age}} 外貌：{{looks}}<br />
</div>
<script type="text/javascript">
const app = new Vue({
el: "#app",
data: {
name: '姜恒',
age: 18,
looks: 'very beautiful'
},
/* 方法 */
methods: {
desc() {
console.log("—————————————————————methods");
return '姓名：' + this.name + '年龄:' + this.age;
}
},
/* 侦听器 ,能够监听事件的变化*/
watch: {
name() {
console.log("—————————————————————watchname");
return '姓名：' + this.name + '年龄:' + this.age;
},
age() {
console.log("—————————————————————watchage");
return '姓名：' + this.name + '年龄:' + this.age;
}
},
/* 计算属性 */
computed: {
desc() {
console.log("—————————————————————compute");
return '姓名：' + this.name + '年龄:' + this.age;
}
}
})
</script>
</body>
7、动画 transition
- 过渡的类名（6个）
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
- 图解
- 实例
<!-- 使用animate.css 动画库 -->
<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css" rel="stylesheet">
<style>
/* 自定义的类名 */
.my-enter,
.my-leave-to {
opacity: 0;
transform: translateX(80px);
}
.my-enter-active,
.my-leave-active {
transition: 0.8s;
}
/* 默认的类名 */
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateY(500px);
}
.v-enter-active,
.v-leave-active {
transition: 0.8s;
}
</style>
</head>
<body>
<div id="app">
<div>
<button @click="flag=!flag">点击</button>
<transition>
<h3 v-show="flag">我在这里</h3>
</transition>
</div>
<hr>
<div>
<button @click="flag2=!flag2">点击</button>
<transition name="my">
<h3 v-show="flag2">我在这里</h3>
</transition>
</div>
<hr>
<!-- 使用animate.css 动画库 -->
<!-- bounceIn 进入 bounceOut 离场 -->
<div>
<button @click="flag3=!flag3">点击</button>
<!-- duration 设置入场和离场的时间 -->
<transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="1000">
<h3 v-if="flag3">我在这里</h3>
</transition>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag: false,
flag2: false,
flag3: false
}
});
</script>
</body>
- 使用钩子函数实现动画的单程，即只有入场或者是离场
- 实例
<style>
.ball {
border-radius: 50%;
width: 20px;
height: 20px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<hr>
<!-- 使用钩子函数实现动画的单程，即只有入场或者是离场 -->
<div>
<button @click="flag4=!flag4">点击</button>
<!-- duration 设置入场和离场的时间 -->
<transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
<div class="ball" v-show="flag4"></div>
</transition>
</div>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
flag4: false
},
methods: {
beforeEnter: function (el) {
// 设置动画的初始位置
el.style.transform='translate(0,0)';
},
// 当与 CSS 结合使用时
// 回调函数 done 是可选的
enter: function (el, done) {
//这句话没有实际的效果，但是不是没有动画效果
el.offsetWidth;
el.style.transform='translate(150px,450px)';
el.style.transition = "all 2s ease";
done();
},
afterEnter: function (el) {
this.flag4 = !this.flag4;
}
}
});
</script>
8、组件
组件是可复用的 Vue 实例，且带有一个名字
- 创建全局的组件（3中方式）
- 实例
<body>
<div id="app">
<!-- 调用组件 直接使用组件的名称就可以 -->
<my-com1></my-com1>
<my-com2></my-com2>
<my-com3></my-com3>
</div>
<template id="temp">
<h2>通过在实例外部定义组件{{msg}}</h2>
</template>
<script>
// 定义全局的组件
// 第一种方式
//1.1 使用vue.extend创建全局的组件
var com1 = Vue.extend({
template: "这是通过Vue.extend的方式创建的
"
});
//1.2 使用vue.component 来声明组件的名字,注意不要写错语法
//这里的命名方式的驼峰方式配置的，在引用是需使用-分开
Vue.component('myCom1', com1);
//第二种方式创建组件 使用Vue.component ("",{})的方式来创建
Vue.component('myCom2', {
template: '这是通过Vue.Component方式创建的
'
})
//第三种的方式 在实例外部定义组件
Vue.component("myCom3", {
template: '#temp',
//组件中的data是以函数返回值的形式返回
data: function () {
return {
msg: '这是属性值'
}
}
})
var vm = new Vue({
el: "#app",
data: {
msg: "父组件中的属性值"
},
methods: {
}
});
</script>
</body>
-
定义私有的组件
-
实例
<div id="app">
<!-- 调用组件 直接使用组件的名称就可以 -->
<login></login>
</div>
var vm = new Vue({
el: "#app",
//定义私有的组件
components: {
//login就是组件的名称
login: {
template: "这是私有的组件，引用组件中的属性------{{name}}
"+
"",
//data 一定是函数返回值得形式
data: function () {
return {
name: '私有组件'
}
},
methods: {
myFunction() {
console.log("调用了组件的方法")
}
}
}
}
});
</script>
- 父组件向子组件传值
<div id="app">
<!-- 使用属性绑定的方式来实现父向子传值 -->
<!-- 通过事件绑定的方法想子组件传递方法 ,func 是随便起的名字-->
<coml4 v-bind:parentmsg='msg' @func='show' @func2='show2'></coml4>
</div>
<template id="temp2">
<div>
<h2>父组件向子组件传值</h2>
<p>得到父组件中的属性值——————————{{parentmsg}}</p>
<input type="button" value="调用父类的方法" @click="myFunction">
<input type="button" value="调用父类带参的方法" @click="myFunction2">
</div>
<script>
//定义一个模板
var coml4 = {
template: "#temp2",
//向子组件传值的名称
//父组件向子组件传值,这里面的值是v-bind 里面自定义的名字
props: ['parentmsg'], //这里面的数据只能读，不能写
methods:{
myFunction(){
this.$emit('func')
},
myFunction2(){
this.$emit('func2',123)
}
}
}
var vm = new Vue({
el: "#app",
data: {
msg: "父组件中的属性值"
},
methods: {
show() {
console.log('调用了父组件的show方法');
},
show2(data){
console.log("调用了组件带参数的方法"+data)
}
},
components: {
// 对上面定义的组件进行赋值
'coml4':coml4
}
});
</script>
9、ref 获取元素和组件引用
- 实例
<body>
<div id="app">
<input type="button" value="获取元素" @click="getElement">
<h3 ref='myH3'>使用ref获取元素</h3>
<hr>
<mycoml ref='mycoml'></mycoml>
</div>
<template id="temp">
<div>
<h3>使用ref获取组件</h3>
</div>
</template>
<script>
var coml = {
template: "#temp",
data: function () {
return {
name: "组件的属性值"
}
}
}
var vm = new Vue({
el: "#app",
data: {
},
methods: {
getElement() {
console.log(vm.$refs.myH3.innerText);
console.log(this.$refs.mycoml.name);
}
},
components: {
"mycoml": coml
}
});
</script>
</body>
持续更新………………