vue01-上
------------------------VUE-------------------------------------------------
官网：https://cn.vuejs.org
API：https://cn.vuejs.org/v2/api/
小 -> 大
封装(函数)->多个封装(文件)==库||框架
↓ ↓
插件 插件
模块(文件) 分类（目录)->包
框架：改变了编码思想 VUE: 数据驱动，一切都是数据,面向数据
面向 事件
面向 对象
面向 数据
库: 工具本身不改变编码的方式
jquery -> dom 事件驱动
MVC：html页面里面会出现<%=后台属性%> {$后台属性$} {{后台属性}} mustache
一个思想、是后端产物,是为了前后端分离
1. 后台 java(jsp+html) php(php+html+js) nodejs(nodejs+ejs)
2. 前台 (html+css+js)
3. 编辑 (拿着后台给他开发的后台管理页面xxx.com:8008/admin.php)
4. 设计
前端MVC(分离js)： 数据、表现、业务分离
model M 数据 ajax/jsonp/数据解析 可以复用
| xx.js
...
view V 视图表现层 展示数据、创建元素，变色，运动 可以复用
...
control C 控制层(串业务,事件驱动) 一般不复用
...
function readBaidu(str,callback){..拿着需求str,求数据，调用回调带数据出去.}
function writeLi(data,callback){...拿着数据写页面}
window.onload=function(){
oBtn.onclick=function(){
readBaidu('xxx',function(res){
writeLi(res);
winObj.close()
})
}
}
VUE: 是个M V VM框架
MVC:衍生出很多变体 MVP MVVM MV*
mv vm~C
MVVM M <-> VM <-> V
基本使用：
new出来一个Vue的实例，传一堆配置参数，控制一片html
VM: 响应系统 - > vDOM做标记 ->一个循环周期结束后->操作DOM
new Vue 返回 VM
new Vue({
el:'选择器' 要控制的那片html代码
data:{key:value}数据
methods:{fnName:fn} 方法
})
M: 初始化数据
data 选项 number/string/boolean/array/json/undefined/null
V: 数据绑定
{{数据名}} 模板 mustche 插值表达式
v-text="数据名" vue特有的属性(指令)
v-html="strong" 非转义输出
v-for="(val,index) in 数据" val值 index索引 变量数组、对象
key="bmw" 指定key 是个bmw字符 vue是认得 修改VDom的key值
:key="item.id" 指定key 是数据id（唯一性） 修改VDom的key值
v-bind:html属性="数据" 普通的html属性绑定数据
:html属性="数据" 简写 title/src/url/.....
事件：
v-on:事件名="方法"
>vue基本使用
1、data专门放数据（M）
实例通过控制el元素来控制body页面其中$叫实例系统属性或方法，不带的是自定义的实例属性。
this指向实例，即可以通过this找到实例内的内容。
响应式渲染，可是实时更改内容
（在控制台打印vm.title=''）
<script src="./js/vue.js"></script>
或者 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<body>
<!-- V -->
<div id="app">
<!-- mustach语法 -->
<h3>{{ title }}</h3>
<p>{{ dp }}</p>
<p>{{title}}</p>
</div>
<script>
let vm = new Vue({
// 选项
// el:'选择器',
el:'#app',
data:{//M
title:'标题',
dp:'段落'
}
});
</script>
</body>
m层的数据类型
2、m层数据类型在渲染时有什么影响
①undefined到了页面不显示
②arr和json都转字符串
③布尔仍然是布尔值
④数值仍为数值
<body>
<!-- V -->
<div id="app">
<!-- mustach语法 -->
<div>{{ num }}</div>
<div>{{ arr }}</div>
<div>{{ json }}</div>
<div>{{ un }}</div>
<div>{{ nu }}</div>
<div>/{{ str }}/</div>
<div>{{ bl }}</div>
<hr>
<div>/{{str2}}/</div>
</div>
<script>
let vm = new Vue({
// 选项
// el:'选择器',
el:'#app',
data:{//M 初始化数据的地方
title:'标题',
num:110,
arr:['aa','bb','cc'], //[ "aa", "bb", "cc" ]
json:{a:1,b:2}, //{“a”：1，“b”：2}
un:undefined,
nu:null,
str:'',
bl:true,
str2:' ' // / /
}
});
</script>
</body>
数据绑定
3、数据绑定的形式
①指令：特殊的html自定义属性
<div v-text='txt'></div>
②mustach
{{ }}
③属性绑定1：html的属性值动态化
例子：<img :src="src">
④属性绑定2属性名动态化
<!-- V -->
<div id="app">
<h3>数据绑定的形式</h3>
<h4>mustach:出现在开始和接受标签之间</h4>
<div>{{ title }}</div>
<hr>
<h4>指令: 特殊的html自定义属性</h4>
<!-- <div v-text="数据/实例属性"></div> -->
<div v-text="txt"></div>
<hr>
<h4>属性绑定: html的属性值动态化</h4>
<img :src="src" alt="">
<h4>属性绑定2: 属性名动态化</h4>
<img src="https://cn.vuejs.org/images/logo.png" v-bind:[propimg]="val1">
</div>
<script>
let vm = new Vue({
// 选项
// el:'选择器',
el:'#app',
data:{//M 初始化数据的地方
title:'标题',
txt:'沙发斯蒂芬',
src: 'https://cn.vuejs.org/images/logo.png',
propimg: 'title',
val1:'呵呵哒'
}
});
</script>
</body>
列表渲染
<body>
<!-- V -->
<div id="app">
<h3>列表渲染</h3>
<!-- 指令：里面可以给语句 -->
<ul>
<!-- <li v-for="val in arr">{{ val }}</li> -->
<li v-for="val of arr">{{ val }}</li>
</ul>
<hr>
<ul>
<li v-for="item of arr2">
<!-- 插值表达式 -->
<p>姓名: {{ item.name }}</p>
<p>地址: {{ item.address}}</p>
</li>
</ul>
<hr>
<ul>
<li v-for="item of arr3">
{{item.name}}/{{item.address}}
<ul>
<li v-for="item of item.children">
{{item.name}}/{{item.address}}
</li>
</ul>
</li>
</ul>
</div>
<script>
let vm = new Vue({
// 选项
// el:'选择器',
el:'#app',
data:{//M 初始化数据的地方
arr:['aa','bb','cc'],
arr2:[
{id:1,name:'alex',address:'外滩18号'},
{id:2,name:'alex2',address:'外滩1号'},
{id:4,name:'alex3'},
],
arr3:[
{id:1,name:'alex',address:'外滩18号',children:[
{id:1,name:'ooo',address:'霞飞路1号'},
{id:1,name:'ooo2',address:'霞飞路11号'},
]},
{id:2,name:'alex2',address:'外滩1号'},
{id:4,name:'alex3'},
]
}
});
</script>
</body>
绑定事件
<!-- V -->
<div id="app">
<h4>事件绑定</h4>
<div>{{num}}</div>
<div v-show="bl">box</div>
<!-- <input type="button" value="按钮" v-on:原生js事件名="函数"> -->
<!-- <input type="button" value="按钮" v-on:touchstart="函数"> -->
<!-- <input type="button" value="按钮" v-on:click="show1"> -->
<!-- 简写 -->
<!-- <input type="button" value="按钮" @原生js事件名="函数"> -->
<input type="button" value="按钮" @click="show1">
</div>
<script>
let vm = new Vue({
// 选项
// el:'选择器',
el:'#app',
data:{//M 初始化数据的地方
num:110,
bl: true
},
methods:{
show1:function(){
console.log(this)
this.num=119+Math.random()
this.bl=!this.bl
}
}
});
</script>
</body>```