vue
Vue
Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件，是又一个js库。
Vue是一个渐进式的js框架
特性
❤轻量
Vue.js库的体积非常小的，并且不依赖其他基础库。
❤数据绑定
对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。
❤指令
内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM。
❤插件化
Vue.js核心不包含Router（路由）、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
❤组件化
组件可以扩展 HTML 元素，封装可重用的代码。允许我们使用小型、自包含和通常可复用的组件构建大型应用
允许大写自定义标签
MVVM模式（Model-View-ViewModel）
ViewModel是Vue.js的核心，它是一个Vue实例
双向绑定，一方修改，两边都会同时修改
从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
语法
El
指定相应的挂载对象
可以使用id,class,标签(建议使用id挂载)
挂载后代表这个标签被vue接管
Data
vue对象准备的数据
这个数据发生变化后,用到它的view部分值也改变
Methods
vue中对象的方法
在html中 {{方法()}}
在js vue对象.方法()
方法中的this就是指这个vue对象
vue指令
指令就是 v-属性
v-text,v-html :展示相应的数据
v-for ：循环
v-bind: 绑定属性
v-model: 数组双向绑定(input,select,textarea)
v-show：显示也隐藏
v-if: 判断
v-on: 注册事件
v-text和v-html的区别：
v-html会读到html标签(会显示标签的效果)
v-text会把标签当做字符串显示
注意:标签中如果加了它们，里面的值就会被替换
v-for
可以循环数组,对象，数字与字符串
直接拿到数组中的值
{{v}}
直接拿到数组中的值与索引
{{v}}
直接拿到对象的属性值
{{v}}
直接拿到对象的属性值，属性名,索引
{{v}}
new Vue({
el:"#app",
data:{
hobbys:["空调","吃饭","睡觉","打豆豆"],
user:{
id:1,
username:"隔壁王哥",
age:45,
sex:true
},
num:10,
name:"it"
}
})
v-bind: 绑定属性
可以让属性在vue对象中取值
标签形式
![在这里插入图片描述]()
简写形式
![在这里插入图片描述]()
直接绑定所有属性
![在这里插入图片描述]()
new Vue({
el:"#app",
data:{
src:"1.jpg",
attr:{
src:"1.jpg",
width:40,
height:40
}
}
})
v-model: 数组双向绑定
只能作用于(input,select,textarea)
{{textVal}}
new Vue({
el:"#app",
data:{
textVal:"xxxx"
}
})
v-show:展示与隐藏
只是隐藏(display:none)
显示我吧
显示我吧
new Vue({
el:"#app",
data:{
show:true
}
})
v-if:判断
v-if,v-else-if,v-else(不显示dom元素就删除)
你很棒
你努力
你不行
new Vue({
el:"#app",
data:{
score:80
}
})
v-on:注册事件
标准写法
简写形式
调用方法(加不加括号都可以实现)
new Vue({
el:"#app",
data:{
score:80
},
methods:{
say(){}
}
})
组件
注意事项：
一定要先定义组件,再进行vue的挂载
模板中必需有一个根标签
取名的问题
如果使用驼峰命名法 myTag ->
1．全局组件---->>>>>所有被挂载的位置都可以使用
Vue.component("mytag",{
template:"我有100句代码!"
});
2．局部组件---->>>>>只能在当前被挂载的元素中使用
new Vue({
el:"#app",
//创建局部的组件
components:{
//组件的名称
"mytag":{
template:"我是一个局部的组件！"
}
}
})
路由
产品
关于