一、了解型知识点：
前端与后端是什么？
前端：数据展示
后端：数据处理
依赖包从哪里来？
npm管理
npm 的服务器是在国外的 国内下载很慢
淘宝镜像： npm i -g cnpm --registry=https://registry.npm.taobao.org
jquery :
1.cd 到你要下载是的文件夹下
2.初始化 npm init -y
3.下载 npm install --save jquery
4.修改下载版本
4-1 在下载的时候直接指定版本 npm install --save jquery@版本号
4-2 可以在项目的package.json文件进行修改 在项目下使用 npm install 进行重新下载
框架是什么？
与业务无关的代码块
业务：就是项目的功能
框架优缺点
简化了项目的复杂度 提高了项目的价值
缺点：你要学习一套新的语法
html属性是什么？
概念：扩展html标签的功能
语法：属性写在html的 开标签中 属性=“属性值 ” 多个属性用空格隔开
二、知道型知识点：
vue：
概念：vue.js是现今最为主流的 前端 MVVM 框架 （更简单的来展示数据）
三、要记型知识点：
MVVM是什么？
M Model 模型-----》数据
V View 视图-----》用户可以看见的界面
Vm ViewModel 视图模型-----》数据与展示相分离 视图于模型之间的桥梁 用来关联
{ {}}是什么？
{
{}} 模板语法/双大括号表达式/双大括号赋值法
{
{ 表达式 }} 表达式 —》 通过计算可以得到结果的公式
渲染分类：
1.vue 的核心就是可以使用简单简洁的模板语法来声明式的对数据进行展示。
2.原生js ：命令式渲染 我们需要去命令我们的程序 你应该一步一步怎么走
3.vue框架 ：声明式渲染 我们只需要告诉程序你要干什么 他就自己完成了
指令
1.指令概念 ：就是用v- 前缀的html特殊属性
2.指令的作用是什么？：在vue中 扩展html标签的功能
3.指令的语法：写在html的开标签中 并且 v-指令=“指令值” 多个指令用空格隔开
4.v-model指令实现双向绑定原理：双向绑定 是通过 数据劫持与发布者订阅者模式来实现的
数据劫持：数据拦截 数据阻断 就是vm层会时时刻刻的监听者模型和视图中的数据当其中一个改变了 vm层就会收到通知（vm怎么收到的通知 通过数据劫持 Object.defineProperty() 他可以拦截 所绑定的对象数据 然后通过其中是的getter和setter方法来实现 读取与修改）；
发布者订阅者 ： 就是一个一对多的关系；
代码区：
no.1 helloword
<!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>
<!-- 1.创建v层-->
<div id="demoDiv">
{
{
text}}
</div>
</body>
</html>
//这里是下载vue依赖包引入vue.js包
<script src=”node modules/vue/dist/vue .min.js"></script>
<script>
// 2.创建vm层就是new出来的实例
new Vue({
//m层
data:{
text:'么么哒'
};
el : " #demoDiv'
})
/script>
no.2语法
<! DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X- UA-Compatible" content=" IE=edge" >
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
/head>
<body>
<!-- 1.创建v层- - >
<div id="demoDiv">
<h1>{
{
arr[2]}}</h1>
<h1>{
{
age+15}}</h1>
<h1> {
{
we . uesra}}</h1>
<h1> {
{
we . uesrb}}</h1>
</div>
/body>
</html>
<script src="./node_ modules/vue/dist/vue .min. js"></script>
<script>
//2.创建vm层就是实例层
new Vue({
data:{
name: Zz，
age:18,
we:{
uesra:' 1212'
uesrb: '33 '
}，
arr:[1111 ,222222 ,3333333，44444 ]
},
el:' #demoDiv'
})
</script>
no.3v-show指令
作用：控制元素的显示和隐藏
使用css的display来进行css的设置
true 显示 false 隐藏
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF- 8">
<meta http-equiv="X-UA-Compatible" content= ”IE=edge" >
<meta name= "vi ewport" content="width=device - width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id=" demoDiv">
<h1>V- show</h1>
<h1 v- show=” bool' >看我显示隐藏</h1>
</div>
</body>
</html>
<script src=" node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
bool:false
el: ' #demoDiv '
})
</script>
no.4v-model指令
1.用于在表单元素上进行数据的双向绑定;
2.v- model是实现视图与模型双向绑定的;
3.v -model只能在表单之，上实现双向绑定;
4.模型数据是绑定在视图之上;
5.视图数据改变，模型数据也随之改变;
<! 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=" demoDiv">
<input type="text" v- model=' text1'>
<h1>v - model</h1>
<p><h1>{
{
text1}}</h1></p>
</div>
body>
/html>
<script src="node_ modules/vue/dist/vue， min. js"></script>
<script>
new Vue({
data:{
text1:'么么哒'
},
el:' #demoDiv'
})
</script >
no.5v-show \v-model小练习
<!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="demoDiv">
<input type=" checkbox" v - model=”bool '><p v- show= ' bool'>{
{boo1?'有我: '没我'}}</p>
<p>{
{
boo1}}</p>
<h1 v- show= ' bool '>显示隐藏</h1>
</div>
</body>
</html>
<script src=" . /node_ modules/vue/dist/vue .min. js"></script> 4
<script>
new Vue({
data:{
bool:false
},
el: ' #demoDiv '
})
</script>
no.6v-on指令
就是在vue中绑定事件的指令 （在vue中不能直接使用事件 必须使用v-on修饰才能使用）
<!DOCTYPE htm1>
<html lang= "en">
<head>
<meta charset="UTF-8">
<meta http- equiv="X-UA- Compatible" content="IE=edge">
<meta name= "vi ewport" content= "width=device-width, initial-scale=1.0">
<title>Document</title>
:/head>
<body>
<div id="demoDiv">
<h1>v-on</h1>
<button v- on :click=' fun()'>点击我打印</button)
<button @click=fun()>点击我打印</button
</div>
</body>
</html>
<script src=" ./node modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
},
el: ' #demoDiv '
//函数要写在data,与e1同级位置，并用methods表达
methods: {
fun(){
console. log('你好' )
})
</script >
no.7v-show\v-on\ v-model小练习
<!DOCTYPE html>
<html lang= "en" >
<head>
kmeta 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="demoDiv">
<h1 @click=' fun()'>{
{
tex}}</h1>
<input type= "text" v-model= ' tex' v- show='bool'>{
{
bool?'有我:‘没我' }}
<p>{
{
tex}}</p>
:/div>
</body>
</html>
<script src="node modules/vue/dist/vue .min.js"></script>
<script>
new Vue( {
data:{
bool:true,
tex:'么么哒'
}
el: ' #demoDiv'，
methods: {
fun(){
this . bool=! this. bool
this.tex='么么哒'
})
/script>
no.8v-for指令
便利data数据 并且进行页面数据展示
语法：
v-for=" (v,i) in 你要便利的数据 "
v 就是便利出来的值
i 就是便利出来的下标
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"]
},
el:"#demoDiv"
})
</script>
</body>
</html>
便利复杂数据
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-for</h1>
<ul>
<li v-for="(item,index) in arr">{
{
item}}------{
{
index}}</li>
</ul>
<table border="1">
<tr v-for="(v,i) in obj">
<td>{
{
v.name}}</td>
<td>{
{
v.age}}</td>
</tr>
</table>
</div>
<script>
new Vue({
data:{
arr:["VN","EZ","NOC","MF"],
obj:[
{
name:"xixi1",age:181},
{
name:"xixi2",age:182},
{
name:"xixi3",age:183},
{
name:"xixi4",age:184},
{
name:"xixi5",age:185}
]
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.9v-bind 初学者最容易忘记的一个
给html标签的属性绑定变量
<!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>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-bind</h1>
<a v-bind:href="ahref">{
{
atext}}</a>
<!-- 简写 -->
<a :href="ahref">{
{
atext}}</a>
</div>
<script>
new Vue({
data:{
atext:"点我去百度",
ahref:"http://www.baidu.com"
},
el:"#demoDiv"
})
</script>
</body>
</html>
no.10综合练习
<!DOCTYPE html>
<html lang= "en">
<head>
<meta charset="UTF-8" >
meta http-equiv= "X-UA- Compatible" content=" IE=edge">
kmeta
name="viewport" content= "width=device-width, initial-scale=1.0">
<title> Document</title>
<style>
.red{
background-color: [ 1 red ;
</sty1e>
</head>
<div id=" demoDiv">
<h2>计算总价</h2>
<ul>
<li v-bind:class="v. style?'red':"" v-for="(v,i) in arr" @click=fun(i)>{
{
v.tit1e}--f{
v .num}}</li>
</ul >
kp>总价({
Number}}</p>
/div>
</body>
</html>
<script src=" ./node_ modules/vue/dist/vue .min. js"></script>
<script>
new Vue({
data:{
Number:0,
arr:[
{
title: '苹果”,num:5, style:false},
{
title: '石榴”,num:8, style:false};
{
title: '香蕉”,num:3, style:false},
{
title:”香梨' ,num:4, style:false},
{
title: '板栗”,num:10, style:false}
e1: ' #demoDiv'，
methods:
fun(i){
console. log(i);
this arr[i]. sty1e=!this arr[i]. style
if(this.arr[i].style){
this . Number+=this .arr[i] .num
}else{
this . Number--this . arr[i] . num
})
</scmipt>