vue2.5入门（推荐，差代码）
课程地址：https://www.imooc.com/learn/980html
教程：https://cn.vuejs.org/v2/guidevue
放在头部，避免页面出现抖屏node
挂载点react
下面是原生webpack
模板es6
<!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>
插值表达式，写法一web
v-text指令，写法二vue-cli
v-html指令，写法三npm
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就会影响父组件
- 1. React组件（推荐，差代码）
- 2. Promise 入门（推荐）
- 3. 推荐系统入门代码（关于MovieLens数据集）
- 4. java入门和入门书籍推荐
- 5. postgresql入门教程推荐
- 6. Spring入门学习推荐
- 7. C语言入门推荐
- 8. C++入门读物推荐
- 9. Android入门书籍推荐
- 10. MySQL入门推荐书籍
- 更多相关文章...
- • Markdown 代码 - Markdown 教程
- • Memcached入门教程 - NoSQL教程
- • YAML 入门教程
- • Java Agent入门实战（二）-Instrumentation源码概述
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. React组件（推荐，差代码）
- 2. Promise 入门（推荐）
- 3. 推荐系统入门代码（关于MovieLens数据集）
- 4. java入门和入门书籍推荐
- 5. postgresql入门教程推荐
- 6. Spring入门学习推荐
- 7. C语言入门推荐
- 8. C++入门读物推荐
- 9. Android入门书籍推荐
- 10. MySQL入门推荐书籍