目录
1.Vue
渐进式的Javascript框架 MVVM(Model,View,ViewModel)模式
特点：轻量 数据绑定 指令 插件化 组件化
2.学习vue需要依赖的文件
1.Helloword
创建一个static web
- 引入vue的依赖
- 创建html标签
- 在js代码中.创建一个vue对象
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入vue.js-->
<script src="js/vuejs/vue.min.js"></script></head><body>
<div id="app">
{{message}}</div>
<script>
new Vue({
el:"#app", //挂载
data:{
message:"hello,Vue!"
},
methods:{
}
});</script></body>
2.el实例挂载
Id挂载： el:”#id”
Class挂载： el:”.class”
div挂载:
3.Data
数据的绑定:json的格式
4.双向数据绑定
v-model="name"==>取vue对象上的name的值,同时也作用于这个值.
5.锚点：
通过id定位到你需要的一个元素位置
<a href="#app">回到顶部</a>
d:methods:
methods:绑定函数:
* methods:{
* 函数名:function(p){
* //做事情
* },
* 函数名:function(p){
* //做事情
* }
* }
调用:
* {{sayHello('cyf')}};
* //调这个对象的方法:
v.sayHello('99');
3.Vue的MVVM架构
MVVM：Model-view-ViewModel
Model:数据的封装
View:页面展示
Model和view交互：通过ViewModel:有监听和数据的绑定
4.表达式
{{表达式}}===>作用于vue对象挂载的标签里;
{{+-*/}}
{{isA?a:b}}
{{a+"b":和原生的js一样}}
{{对象:对json对象直接点}}
{{对数组操作:和原生的js一样}}
5.指令
v-text=“表达式” 设置标签中的文本
文本展示，不会解析标签，数据原封不动展示
v-html=“表达式” 设置标签中的html
解析标签
v-if=“表达式” 判断条件
v-for=“表达式” 循环
v-model=“表达式” 数据双向绑定
v-on=“表达式” 注册事件
干事情:v-*===>作用于vue对象挂载的标签里;
5.1:text与HTML
v-text:作用是文本内容,相当于以前的innerText,
如果这个文本中有html标签,纯粹当成一个
文本展示,不会起作用,
v-html:需要使用v-html:相当于以前的innerHTML
5.2:v-for:
循环:
var arrs=['1','2']==>分别取值
java:
for(String str:strs){
System.out.println(str)
}
遍历一个数组:
<!--in关键字:在什么什么里:
v-for="b in birds":表示遍历的对象是:birds,每次遍历得到的是b
-->
<li v-for="b in birds">{{b}}</li>
<!--in关键字:在什么什么里:
v-for="(b,i) in birds":表示遍历的对象是:birds,每次遍历得到的是b,这个b
所对应的索引是i
-->
<li v-for="(b,i) in birds">{{b}}=={{birds[i]}}=={{i}}</li>
遍历一个对象:
{{person}}<br>
<!--p:value-->
<p v-for="p in person">{{p}}</p>
<br>===========================
<!--v:value k:key-->
<p v-for="(v,k) in person">{{v}}==={{k}}</p>
<br>===========================
<!--v:value k:key i:index-->
<p v-for="(v,k,i) in person">{{v}}==={{k}}==={{i}}</p>
小案例:
需求:
我们班有很多的同学,现在我就把所有同学的信息展示在一个table中.
实现:
有一个table;
有我们班的数据
把数据在table中循环展示
5.3:v-bind
将data中的数据绑定到标签上,作为标签的属性.
<标签 v-bind:标签属性名字="表达式"></标签>
<img src="xxx.jpg"/>==>
<img v-bind:src="url"/>
实现:
<!--v-bind:把data的值绑定到一个标签的属性上-->
<img width="10%" height="600px" src="vue/1.jpg" title="你喜欢的"/>
==绑定当个属性:完整写法=>
<img width="30%" height="600px" v-bind:src="url" title="你喜欢的"/>
==绑定当个属性:简单写法=>
<img width="30%" height="600px" :src="url" title="你喜欢的"/>
==绑定多个属性=>
<img :width="w" :height="h" :src="url" :title="t"/>
==整个对象的绑定(注意:对象的key必须和这个标签的属性名相同)=>
<img v-bind="imgO"/>
5.4:v-show:
根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
当v-show的值为真时, 会在标签的css中添加 display: none :
<!--
v-show:表达式的值,是false,就是增加一个不显示的样式而已
-->
5.5:v-if:做判断的
<标签 v-if="表达式">
<标签 v-else-if="表达式">
<标签 v-else-if="表达式">
//60<score && score<80
<标签 v-else>
5.6:v-model:具体见代码
数据的双向绑定:只作用于:input select textarea;
input:
radio:单选框===>绑定到data的key上:value的值
checkbox:复选框===>绑定到data的key上:value的值,需要是一个数组
select:===>绑定到data的key上:value的值
5.7:v-on:事件名:
事件绑定:
<标签 v-on:事件名="表达式或者函数名(圆括号可以要页可以不要,看你有没有参数)">
<标签 @事件名="表达式或者函数名(圆括号可以要页可以不要,看你有没有参数)">
6.VUE组件
先创建组件后挂载
template(模块)中，有且只有一个根
取名用小写(如果是驼峰 myTag -> my-tag)
6.1 全局组件
所有被挂载的位置都可以使用
Vue.component("mytag",{
template:"<div>我有100句代码!</div>"
});
6.2 局部组件
只能在当前被挂载的元素中使用
new Vue({
el:"#app",
//创建局部的组件
components:{
//组件的名称
"mytag":{
template:"<div>我是一个局部的组件！</div>"
}
}
})
扫一扫
1248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
