Vue学习笔记-day1
1.导入vue.js，具体代码和教程在https://learning.dcloud.io/，可以直接在HBuilder中导入代码，非常方便，适合学习。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
</body>
</html>
2.如下图，先导入vue.js,再创建了一个Vue实例，实例中有两个，一个是el，用于定位元素，如果是类选择器，那用".类选择器名称";如果是id选择器，那就用“#id选择器”。另外一个是data，用于保存数据和变量，一般是变量名:值，即key:value。
然后插值使用{{}}双大括号进行插值。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app2">
{{ msg }} {{name}}
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',//元素
data: {//数据，变量
message: 'Hello Vue!',
name : "Vue"
}
});
var app2=new Vue({
el:'#app2',//元素用于定位
data:{//数据变量
msg:'hello world',
name:"Fuck"
}
})
</script>
</body>
</html>
3.数据和方法，使用watch(‘观察对象’,function(新的值，旧值))
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{a}}
</div>
<script type="text/javascript">
var data = { a : 1 };//data是一个变量，值是1
var vm = new Vue({
el : "#app",//ID选择器
data : data//data是变量
});
vm.$watch('a', function(newVal, oldVal){//watch('观察的对象'，function(newWal,oldVal))
console.log(newVal, oldVal);//watch观察变量的变化
})
vm.$data.a = "test...."//用于区分
</script>
</body>
</html>
4.beforeCreate:function(){}在Vue实例初始化之后，数据观测和event/watch配置之前调用，created:function(){}在实例创建完成后立即被调用，在此步，实例已完成数据观测，属性和方法的运算，watch/event事件的回调，然后挂载阶段还没开始， e l 属 性 目 前 不 可 见 。 b e f o r e M o u n t : f u n c t i o n ( ) 在 挂 载 开 始 之 前 被 调 用 ， 相 关 的 渲 染 函 数 首 次 被 调 用 ; m o u n t e d : f u n c t i o n ( ) 为 被 新 创 建 的 v m . el属性目前不可见。beforeMount:function(){}在挂载开始之前被调用，相关的渲染函数首次被调用;mounted:function(){}为被新创建的vm. el属性目前不可见。beforeMount:function()在挂载开始之前被调用，相关的渲染函数首次被调用;mounted:function()为被新创建的vm.el替换，挂载成功时调用，beforeUpdate:function(){}在数据更新时调用，updated:function(){}函数在组件DOM已经更新，组件更新完毕后调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
//生命周期钩子需要写在声明vue里面
var vm = new Vue({
el : "#app",
data : {
msg : "hi vue",
},
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
beforeCreate:function(){
console.log('beforeCreate');
},
/* 在实例创建完成后被立即调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
然而，挂载阶段还没开始，$el 属性目前不可见。 */
created :function(){
console.log('created');
},
//在挂载开始之前被调用：相关的渲染函数首次被调用
beforeMount : function(){
console.log('beforeMount');
},
//el 被新创建的 vm.$el 替换, 挂在成功
mounted : function(){
console.log('mounted');
},
//数据更新时调用
beforeUpdate : function(){
console.log('beforeUpdate');
},
//组件 DOM 已经更新, 组件更新完毕
updated : function(){
console.log('updated');
}
});
setTimeout(function(){
vm.msg = "change ......";
}, 3000);
</script>
</body>
</html>
5.文本插值{{变量名}}
插入网页需要在标签内v-html=""，比如
v-bind:class或者id=“类或者id选择器名”:动态改变值。
v-bind:href=“url”:跳转到网页
v-if=" "
v-else-if=""
v-else="" 判断
@click=“点击事件对应函数”
@click.stop=""：不执行父辈的，只执行自己的。
Vue实例中有el,data,还有一个就是methods，用于定义函数，比如下面的点击事件。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<a v-bind:href="url">...</a>
<div @click.stop="click1">
<div @click="click2">
click me
</div>
</div>
<div @click="click3">
Don't click me or you will shadow the side
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
seen : true,
url : "https://cn.vuejs.org/v2/guide/syntax.html#%E6%8C%87%E4%BB%A4"
},
methods:{
click1 : function () {
console.log('click1......');
},
click2 : function () {
console.log('click2......');
},
click3:function(){
console.log('clickmmmmmm');
}
}
});
</script>
<style type="text/css">
</style>
</body>
</html>
6.数组渲染
v-for=“item,index in 定义的数组名”:key=“index”
v-for=“value,key in 定义的数组名” :循环取出属性名+值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="item,index in items" :key="index">
{{index}}{{ item.message }}
</li>
</ul>
<ul>
<li v-for="value, key in object">
{{key}} : {{ value }}
</li>
</ul>
<ul>
<li v-for="value,key in lesson">
{{value}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el : "#app",
data : {
items : [
{ message: 'Foo' },
{ message: 'Bar' },
{ message:'too far'}
],
object: {
title: 'How to do lists in Vue',
author: 'Jane Doe',
publishedAt: '2016-04-10'
},
lesson:{
titile:"高等数学",
author:"汪红"
}
}
});
</script>
</body>
</html>