VUE的认识
VUE
vue官网(https://cn.vuejs.org/)
1.VUE了解
① VUE是一个渐进式的js框架(MVVM模式)
1）渐进式：学多少，用多少
2）MVVM模式：
② 特性
轻量：
Vue.js库的体积非常小的，并且不依赖其他基础库。
数据绑定：
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
指令：
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
插件化：
Vue.js核心不包含Router（路由）、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
组件化：
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
允许大写自定义标签
2.VUE入门
① 引入vue.js
② 准备工作台
{{name}}
{{age}}
③ 创建Vue对象
var app=new Vue({
el:"#app",
data{
name:"张三",
age:33
}
})
3.Vue实例挂载(el)的标签
每个Vue实例通过el配置挂载的标签，该标签可以通过id或者是class挂载。 实例上的属性和方法只能够在当前实例挂载的标签中使用。
var app=new Vue({
el:"#app", //el:".app" el:"div"
data{
...
}
})
4.Vue中的数据(data)详解
① Vue实例的数据保存在配置属性data中, data自身也是一个对象
data : {
//可以是字符串
message : "我是一个很单纯的p",
//也可以是对象
employee: {
name : "隔壁老文",
age : 17,
doing(){
alert("吃饭")
}
},
//还可以是数组
array:["aa","bb","c"]
......
}
② 修改data对象中的数据,及时同步的页面上
③ 通过Vue实例直接访问
{{message}} //我是一个很单纯的p
{{employee.name}} //隔壁老文
{{employee.age}} //17
{{array[0]}} //a
5.Vue中的方法(methods)详解
{{say()}}
var app = new Vue({
el : "#app",
data : {
.....
}
},
methods:{
say:function(){
//this指向当前对象，当前app对象
return "hello:"+this.user.name+"!";
},
swim:function(){
console.debug("小狗的游泳姿势，还不错。。。");
}
}
});
//通过Vue对象实例调用方法
app.swim();
this.swin();
6.vue数据双向绑定体验(v-model)
{{message}}
VUE表达式语法
1 .简单表达式(在 {{ }} 中进行简单预算)
在进行简单运算时，如果参与运算的值有字符串，-，*，/会把字符串转换成数字在运算，+则会字符串拼接
{{5+5}}
10
{{5+"v5"}}
5v5
{{5+"5"}}
55
{{"5"-"5"}}
0
{{5*5}}
25
{{"5"*"5"}}
你在做* / - % 字符串它会自动转为数字 25
{{5/5}}
1
{{5/5}}
1
2.三目运算
{{ show1?"真":"假"}}
3.字符串操作
{{"这是字面值"}}
{{"这是字面值".length}}
//字段长度
{{message.length}}
//message的长度
{{message.substring(1,5)}}
//获取message的下标1-5的字段
{{message.substring(2,6).toUpperCase()}}
//英文字段大写
4.对象操作
{{user}}
{{user.toString()}}
{{user.name}}
{{user.age}}
{{user.getAge()}}
5.数组操作
{{hobbys}}
{{hobbys[0]}}
{{hobbys.length}}
VUE指令
vue指定的一些特殊的属性，格式:v-xxx
① v-text
主要用于展示一个标签的数据，但标签原来的数据会被覆盖，文本展示，不会解析h5的标签，会原封不动的展示
原来的数据
message: "这是HTMl代码
"
② v-html
主要用于展示一个标签的数据，但标签原来的数据会被覆盖，会解析h5的标签，展示相应的效果
原来的数据
message: "这是HTMl代码
"
③ v-for
基于数据源多次循环达到多次渲染当前元素
数据源可以是Array，Object，NumBer，String
语法1：
<标签 v-for="元素 in 数据源">
语法2：
<标签 v-for="(元素,索引|键) in 数据源">
语法3：
<标签 v-for="(元素,键,索引) in 对象">
实例
循环数组
- {{hobby}}
遍历对象
- {{value}}
带索引循环数组
- {{index}}--{{hobby}}
带键遍历对象
- {{index+1}}---{{key}}--{{value}}
④ v-show
是否显示此数据，只是隐藏了数据，还是存在的
<标签名 v-show="true/false">
⑤ v-if
根据表达式的值的真假条件渲染元素，如果不满足条件，就会从页面上删除
<标签名 v-if="判断表达式">
实例
你看到我了!
你看不到我了!
优秀
⑥ v-else
当v-if表达式不成立时, v-else执行
<标签名 v-if="表达式">
<标签名 v-else>
⑦ v-else-if
<标签名 v-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else-if="表达式">
<标签名 v-else>
⑧ v-model
在表单控件上创建双向绑定
1） 表单控件
{{textVal}}
{{pwdVal}}
男
女 {{sexVal}}
篮球
足球
排球
棒球{{hoppes}}
2） TextArea控件
{{textarea}}
3）Select控件
{{skills}}
⑨ v-on 事件绑定
语法：
<标签 v-on:事件句柄="表达式或者事件处理函数">
简写
<标签 @事件句柄="表达式或者事件处理函数">
实例
