VUE基础知识
学习之前实现一个简单的vue dome
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h1> {
{name}}</h1>
<h2>{
{ totle}}</h2>
<button @click="add(1)">点击</button>
<label for="">姓</label>
<input type="text" v-model="firstname">
<label for=""> 名</label>
<input type="text" v-model="lastname">
<label for="">姓名</label>
<input type="text" v-model="allname">
<h3>{
{allname}}</h3>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm=new Vue({
el:"#app",
data:{
name:"niu",
num1:1,
num2:3,
count:88,
firstname:"牛",
lastname:"开心",
allname:"haha"
},
methods:{
add:function(a){
console.log("打印过",a);
}
},
computed:{
totle:function(){
var totle =this.num1+this.num2
return totle
},
},
// watch监听属性的方法
watch:{
//配置监听
firstname(newvalue,oldvalue){
console.info("监听 count的变化")
this.allname= this.firstname+ this.lastname
console.info( this.allname)
}
},
})
</script>
</html>
我们来做我们的第一个Vue程序,体验一下Vue的响应式
- 阅读JavaScript代码,会发现创建了一个Vue对象
- 创建Vue对象的时候,传入了一些options:{}
- {}中包含了el属性:el属性:提供一个在页面上已存在的 DOM 元素作为 Vue 实例的挂载目标(节点),el属性的属性值为字符串,该字符串是 CSS 选择器,也可以是一个 HTMLElement 实例 ,该属性指定vue实例的挂载对象的节点 只在用
new
创建实例时生效,指定vue实例的作用范围。 el: ‘#app-3’, - {}中包含了data属性:当一个 Vue 实例被创建时,它将
data
对象中的所有的 property (属性)加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。data:用于存放实例需要的数据,属性值可以是一个对象,也可以是一个返回对象的函数 - {}包含了事件处理函数:事件处理methods属性:
(1). 事件的监听:通过在标签身上通过v-on的指令来设置事件的监听简写为@click,该指令的值可以是:“事件执行的代码(直接在双大括号里面绑定事件),”也可以是事件处理函数。methods属性(和data同级):为方法属性,属性值为一个对象
(2). 事件处理函数:在Vue中,提供了methods属性用来定义实例中需要用到的所有方法,也就包含了事件的方法,注意在methods里面使用数据必须用this.属性
(3.) 事件传参:在vue中我们可以通过事件处理函数进行参数的传递:在事件名后面小括号(参数)
6.{}中包含了computed属性 :vue中提供的计算属性:当需要对原数据做一些额外的操作,并且并不需要改变原数据,而是得到一个新数据,计算属性里面的数据会随着元数据的改变而改变,这时可以采用计算属性计算属性和data属性同级
计算属性的特点:计算属性在第一次使用时,对应的方法结果会被缓存,除非依赖的原数据发生改变,对应的结果也会改变
计算属性的get和set方法
https://www.jianshu.com/p/8ad34c83cea0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<p>请选择个人爱好</p>
<!-- 这里注意不要用 :checked="xx" 绑定选中状态 这样并不能形成双向绑定的作用 -->
<p><input type="checkbox" v-model="checkAll">全选 checkAll : {
{ checkAll }}</p>
<p><input type="checkbox" v-model="eat">吃饭 eat : {
{ eat }}</p>