vue2.5入门（推荐，差代码） 原
教程：https://cn.vuejs.org/v2/guide
放在头部，避免页面出现抖屏
挂载点
下面是原生
模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
</div>
<script>
// 挂载点，模板，实例之间的关系
new Vue({
el: "#root",//挂载点
template: '<h1>{{msg}}</h1>',//模板
data: {
msg: "hello world1"//实例
}
})
// 在vue内部实际操作
// var dom = document.getElementById('root')
// dom.innerHTML = "hello world"
</script>
</body>
</html>
插值表达式，写法一
v-text指令，写法二
v-html指令，写法三
v-html与v-text区别：
被转义
未被转义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- 写法一：插值表达式 -->
<h1>{{number1}}</h1>
<!-- 写法二：v-text指令 -->
<h1 v-text='number2'></h1>
<!-- 写法三：v-html指令 -->
<h1 v-html='number3'></h1>
<!-- v-html与v-text区别：v-html的标签对未被转义 -->
<h1 v-text='number4'></h1>
<h4 v-html='number4'></h1>
</div>
<script>
// vue实例中的数据
new Vue({
el: "#root",
data: {
msg: "hello world1",
number1: '111',
number2: '222',
number3: '333',
number4: '<h1>444</h1>'
}
})
</script>
</body>
</html>
指令，v-on绑定事件，箭头函数
简写
v-bind指令，绑定title，属性绑定
等号后面内容是js表达式，不是字符串
简写
单项绑定
v-model指令，双向数据绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- <div v-on:click='()=>{alert(123)}'>{{content}}</div> -->
<!-- v-on事件绑定 -->
<div v-on:click='handdleclick'>{{content}}</div>
<!-- v-on事件绑定的简写 -->
<div @click='handdleclick'>{{content}}</div>
<!-- v-bind属性绑定 -->
<div v-bind:title='title'>hello title1</div>
<div v-bind:title='"del lee" + title'>hello title2</div>
<!-- v-bind属性绑定的简写 -->
<div :title='title'>hello title3</div>
<!-- v-model数据双向绑定 -->
<input v-model='double'>
<div>{{double}}</div>
</div>
<script>
// vue中的绑定事件
new Vue({
el: "#root",
data: {
content: "hello world1",
title: 'this is hello world',
double: 'this is data'
},
methods: {
handdleclick: function(){
// alert(123)
this.content = 'world'
}
}
})
</script>
</body>
</html>
computed，计算属性，如果没改变，会使用上一次计算的缓存结果
计算
和react的reselect库很像
watch，侦听器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
姓：<input v-model='firstName'>
名：<input v-model='lastName'>
<div>{{firstName}} {{lastName}}</div>
<div>{{fullName}}</div>
<h2>{{count}}</h2>
</div>
<script>
// vue中的计算属性和侦听器
new Vue({
el: "#root",
data: {
firstName: '',
lastName: '',
count: 0
},
computed: {
fullName: function(){
return this.firstName + ' ' + this.lastName
}
},
watch: {
firstName: function(){
this.count ++
},
lastName: function(){
this.count ++
}
}
})
</script>
</body>
</html>
指令v-if，会从dom树上清除
点击隐藏显示
指令v-show，不从dom树上删除
display=none
指令v-for,数据做循环
：key会提升每项渲染数据的效率，但是要求每一项数据不同
添加index下标，相同数据也可以
但如果要频繁对数据进行排序，index会出错。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="root">
<!-- v-if指令,会从dom上清除 -->
<div v-if='show1'>hello1</div>
<button @click=handleClick1>toggle1</button>
<!-- v-show指令,不会从dom上清除 -->
<div v-show='show2'>hello2</div>
<button @click=handleClick2>toggle2</button>
<!-- v-for指令,数据循环 -->
<ul>
<li v-for='item of list1'>{{item}}</li>
</ul>
<!-- ：key会提升每项渲染数据的效率，但是要求每一项数据不同 -->
<ul>
<li v-for='item of list2' :key="item">{{item}}</li>
</ul>
<!-- 添加index下标，相同数据也可以 -->
<ul>
<li v-for='(item,index) of list3' :key="item">{{item}}</li>
</ul>
</div>
<script>
// vue中的计算属性和侦听器
new Vue({
el: "#root",
data: {
show1: true,
show2: true,
list1: [1,1,1],
list2: [4,4,6],
list3: [7,6,6],
},
methods: {
handleClick1: function(){
this.show1 = !this.show1
},
handleClick2: function(){
this.show2 = !this.show2
}
}
})
</script>
</body>
</html>
点击提交并且数据写在下边，input框消失
Vue.component定义的是全局组件
var一个，局部组建，在父组件外边是调用不了的
组件声明，实例模板里就可以使用
传参
会报错，彩曾传递不能直接使用
利用props来接收传递过来的参数
每一个vue的组件又是vue的一个实例
根组件下没有模板的时候，会用挂载点下的内容当模板
父组件到子组件通过属性传递
子组件如果想被删除，就要在父组件里把子组件的那条数据给删除
增加一个参数，index
接收index。通过$emit通知父组件，触发delete事件
父组件监听delete事件，监听到的时候，触发handleDelete事件
通过子组件向父组件传值的方式，做好删除
npm install --global vue-cli
vue init webpack todolist
cd todolist
npm run dev
bulid下放置webpack的配置文件
config是针对开发环境和线上环境的一些文件
node_modules是项目的依赖
src是源代码所放置的目录
static是静态资源
浏览器编译，es6检测，不需要改动
整个网页app
——————————————————
src/main.js整个项目的入口文件
创建了一个vue的实例，id=‘app’的挂载点
注册了一个局部组建App（es6语法引入）
模板就是App组建的内容
Es6:如果键值都相同，只写一个App
template模板，script标签-组建逻辑，style样式
vue-cli里的语法：单文件组建
npm run dev
npm run start
以前data是对象,用{}，现在是函数
es6简化写法
this指向本组件的实例
缩写，别名
注册局部组建
v-for循环
父组件向子组件传值，利用属性传值
子组件接收传值
增加功能实现
传递index
接收传递
解决console里的警告问题，加一个：key
子组件触发事件传递父组件，$emit
父组件监听delete
触发删除事件
子组件样式不会影响父组件
scoped样式作用域
去掉scoped就会影响父组件
