vue.js框架

最新推荐文章于 2024-06-28 11:51:12 发布

初心魏

最新推荐文章于 2024-06-28 11:51:12 发布

阅读量345

点赞数

分类专栏： java 框架文章标签： vue 框架

本文链接：https://blog.csdn.net/qq_42306803/article/details/89784421

版权

java 框架专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、Vue.js框架
二、其他属性
三、组件相关
四、vue路由
五、vue.js Ajax

一、Vue.js框架

1.1 概念

构建用户界面的渐进式框架
只关注图层，采用自底向上增量开发的设计
目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。

1.2 入门程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<p id="ap">{{message}}</p>
	</body>
</html>
<script>
	var vue = new Vue({
		el:"#ap",
		data:{
			message:"hello,world"
		},
		methods:{
			
		}
	})
</script>

结果:输出hello，world

1.2 Vue中构造器的内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<p id="ap">{{message }}{{method()}}</p>
	</body>
</html>
<script>
	var vue = new Vue({
		el:"#ap",
		data:{
			message:"hello,world"
		},
		methods:{
			method:function(){
				return "Vue.js";
			}
		}
	})
</script>

el参数：DOM元素中的id
date : 用于定义属性
methods：用于定义函数
{{}}:用于输出函数对象和属性值
当一个Vue对象被创建时，他向Vue的响应体系中加入了其data对象中能找到的所有属性，当这些属性发生改变时，html视图也会发生相应的改变。

1.3 模板语法

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1.4 插值

1.4.1 文本(最常见形式）

<p>{{message}}</p>

1.4.2 v-html指令

使用v-html指令用于输出html代码

<div v-html="message"></div>

1.4.3 v-bind指令

HTML属性中的值应使用v-bind指令

//use为true，使用class1的样式，否则不使用
<label for="r1">修改颜色</label>
			<input type="checkbox" v-model="use" id="r1"/>
			<div v-bind:class="{'class1':use}">
				v-bind:class指令
			</div>

绑定data中的数据,冒号后面直接写参数

<a v-bind:href="url">菜鸟教程</a>

1.5 指令

指令用于在表达式的值改变时，将某些行为应用到DOM上

1.5.1 v-if指令

根据表达式的值来决定插不插入p元素

<div id="app">
			<p v-if="flag">
				emmm,不好的心情
			</p>
			<template v-if="judge">
				<p>要学好多话</p>
				<p>p标签带自动换行</p>
				<span>span标签不带自动换行</span>
				学的都快忘完了
			</template>
		</div>

var vue = new Vue({
		el:"#app",
		data:{
			flag:true,
			judge:true
		}
	})

Template(模板)相当于一个容器，可以放很多条语句

1.5.2 v-on指令

监听dom事件
修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

methods:{
			good: function(){
				this.sentence=this.sentence.split('').reverse().join('');
			}

split(’ ‘);将句子分割成单个单词
join(’ ');把分割的字符串按照俩里面的分隔符进行拼接

1.5.3 缩写

v-bind可以缩写为：
v-on可以缩写为 @

1.5.2 v-model指令

v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。

输入姓名:<input type="text" v-model="name"/>

data:{
			name:"张三"
		},

1.6 过滤器

Vue.js 允许自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

在两个大括号中
{{message|capitalzie}}
在v-bind指令中
<div v-bind:id=“rawId | formatId”>

<div id="app">
			{{message | captilize}}
		</div>
		
message:"good idea",

filters:{
			captilize: function(value){
				return value.toUpperCase().split('').reverse().join('');
			},
		}

1.7 条件循环与判断语句

1.7.1 v-if

1.7.2 v-else

<div  id="app">
        <div v-if="3 > 4">
		哈哈
		</div>
		<div v-else>
			开心开心
		</div>	
</div>
结果:
开心开心

1.7.3 v-if-else-if

	<div id="app">
			<div v-if="flag === 'a'">
			哈哈
			</div>
			<div v-else-if="flag === 'b'">
				开心开心
			</div>	
			<div v-else>
				达拉大佬
			</div>	
		</div>

1.7.4 v-show命令

v-show 指令来根据条件展示元素：

<h1 v-show="judge">
				老奶奶
			</h1>

judge:true

1.8 循环语句

v-for命令

遍历数组

<p v-for="arr in array">{{arr.name}}</p>

array:[
				{name:"zhangsan"},
				{name:"lisi"},
				{name:"wangwu"}
			]

<template></template>中可以遍历一段数据

遍历一个对象的属性

<p v-for="value in student">{{value}}</p>

student:{
				name:"zhangsan",
				age:"19",
				address:"shanxi"
			}

value依次指向对象中的每一个元素

（value, key）遍历对象中各个属性

<p v-for="(value, key) in student">{{key}}:{{value}}</p>

结果:
name:zhangsan

age:19

address:shanxi

第三个参数为索引
参数的顺序和结果的顺序相反

<p v-for="(value, key,index) in student">{{index}}.{{key}}:{{value}}</p>

遍历整数

<p v-for="n in 10">{{n}}</p>

结果:
1
2
3
...

二、其他属性

2.1 计算属性computed

直接调用函数

<p>{{toUpper}}</p>

message:"good",

computed:{
			toUpper: function(){
				return this.message.toUpperCase();;
			}
	}

toUpper值依赖于message，message改变，toUpper值也改变

2.2 computed的get个set

computed有默认的get方法，但是没有默认的set方法，需要我们自定义，一旦调用了set方法，相关的值就会发生改变。

 var vue = new Vue({
        el:"#app",
        data:{
           name:"google"
        },
        computed:{
            site:{
                set:function (value) {
                    this.name = value;
                },
                get:function () {
                    return this.name
                }
            }
        }
    })
    vue.site = "good1111";
document.write(vue.site);

2.3 computed和methods的区别

我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。
computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

2.3 监听属性

可以监听date中变量改变前的值和改变后的值

<div id="app">
			<p>{{count}}</p>
			<button v-on:click="count++" >按钮</button>
</div>
		
data:{
	count:1
}

vue.$watch('count',function(nval,oval){
		alert("旧值" + oval + "变为" + nval);
})

$watch写在new Vue({})外面

写成函数的形式，可以对data中的值进行操作


watch:{
			kilo:function(val){
			//val是text标签中的值，标签中如果写入新的数据，val就是这个新的数据
				this.kilo = val;
				this.meter = this.kilo * 1000;
			},
			meter:function(val){
				this.meter = val;
				this.kilo = val / 10;
			}
			
千米:<input type="text" v-model="kilo">
			米:<input type="text" v-model="meter" />

2.4 样式绑定

为v-bind:class设置一个对象，对象后面的值用来决定该标签里的内容是否显示

<div v-bind:class="{active: isactive}"></div>

.active{
				height: 300px;
				width: 300px;
				background: #0000FF;
			}

可以在v-bind后面多写几个class对象，不过要带’ '。

<div v-bind:class="{active: isactive, 'hello':flag}"></div>

可以将v-bind绑定的class属性的值写在data域里

<div v-bind:class="object"></div>

data:{
			object:{
				active:true,
				hello:false
			}
		}
	});

直接绑定样式对象

<div v-bind:style="varity">你好</div>

varity:{
				fontSize:'20px',
				color:'red'
			}

2.5 事件处理

click点击事件
用v-on指令将点击事件绑定到想要绑定的标签上

methods:{
			method:function(){
				this.oval = this.nval;
			}
		}

event.target返回的是点击元素的节点，比如点击按钮，返回的是Button
用内联JS语句

<button v-on:click="say('你好')">你好</button>

methods:{
			say:function(message){
				alert(message);
			}

2.6 表单

用v-model在表单控件元素上创建双向数据绑定
在这里插入图片描述

下拉菜单

<select v-model="province">
				<option vlaue="请选择一个省">请选择一个省</option>
				<option value="陕西省">陕西省</option>
				<option value="河南省">河南省</option>
				<option value="云南省">云南省</option>
			</select>
			
<p>选择的省份为:<u>{{province}}</u></p>

province:"请选择一个省"

v-model在<select></select>标签里绑定

性别选择

<input type="radio" value="男" v-model="gender" name="sex" checked="checked">男
			<input type="radio" value="女" v-model="gender" name="sex">女
			<p>{{gender}}</p>
gender:"男"

复选框

<div id="app">
			<input type="checkbox" value="游泳" checked="checked" v-model="hobby">游泳
			<input type="checkbox" value="打篮球" v-model="hobby">打篮球
			<input type="checkbox" value="踢足球" v-model="hobby">踢足球
		</div>
		
hobby:["打篮球"]

复选框必须用[ ]来绑定，否则会全选所有值。
*日期标签

<div id="app">
			<input type="date"  v-model="date">日期
			<p>{{date}}</p>
		</div>

date:"2013-03-04"

三、组件相关

3.1 组件的概念

组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

3.2 注册及调用全局组件

注册组件:

Vue.component(tagName, options)

调用组件:

<tarName></tarName>

举例:

Vue.component('component', {template:'<h1>第一个组件</h1>'})
	var vue = new Vue({
		el:"#app",
	});
	
<div id="app">
			<component></component>
		</div>

3.3 注册及调用局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：

var com = {
		template:'<h1>第二个组件</h1>'
	}
	var vue = new Vue({
		el:"#app",
		components:{
			'component':com
		}
	});
	
	<div id="app">
			<component></component>
		</div>

3.3 prop

prop是父组件用来传递数据的一个自定义属性，父组件的数据要通过prop把数据传给子组件，子组件需显示的用prop选项声明prop。

Vue.component('child',{
		props:['message'],
		template:'<span>{{message}}</span>'
	})
	var vue = new Vue({
		el:"#app",	
	});
	
<div id="app">
	<child message="hello!"></child>
</div>

3.4 动态prop

类似于用v-bind绑定HTML特性到每一个表达式，也可以用v-bind动态绑定props的值到父组件的数据中，当父组件的数据变化时，该变化也会传导到子组件。

<div id="app">
			<input v-model="parentMsg"/>
			<br>
			<child v-bind:message="parentMsg"></child>
		</div>
		
Vue.component('child',{
		props:['message'],
		template:'<span>{{message}}</span>'
	})
	var vue = new Vue({
		el:"#app",
		data:{
			parentMsg:'父组件内容'
		}
	});

3.5 以下实例中将 v-bind 指令将 todo 传到每一个重复的组件中：

<div id="app">
			<ol>
				<todo-item v-for="item in sites" v-bind:todo="item"></todo-item>		
			</ol>
		</div>

Vue.component('todo-item', {
		props:['todo'],
		template:'<li>{{todo.text}}</li>'
	})
	new Vue({
		el:"#app",
		data:{
			sites:[
				{text:'runoob'},
				{text:'Google'},
				{text:'taobao'}
			]
		}
	})

todo与item绑定，item是sites中的遍历到的每一个元素，组件的内容是取出item.text的内容并作以展示。

3.6 自定义事件

子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app"> 
		     <p>{{total}}</p>
		 	<child v-on:increment="totalValue"></child>
			<child v-on:increment="totalValue"></child>
		</div>
	</body>
</html>
<script>
//创建一个全局组件，该组件的功能是创建一个按钮，点击一次，count加1.
	Vue.component('child', {
		template:
			'<button v-on:click="addValue">{{count}}</button>',
			data:function(){
				return {
					count:0
					}
				},
			methods:{
				addValue:function(){
					this.count += 1
					this.$emit('increment')
				}
			},
		}
	)
	var vue = new Vue({
		el:"#app",
		data:{
			total:0
		},
		methods:{
			totalValue:function(){
				this.total += 1
				}
		}		
	})
</script>

在子组件中，使用$emit(“xx”）和v-on:xx=“xxx”,把子组件的事件和父组件关联起来，子组件的事件一触发，紧接着父组件的事件也跟着触发。

3.7 自定义事件中的data对象必须是一个函数

data对象是一个函数，组件之间不相互影响,data对象是一个对象，会影响到其他组件

data对象是函数
data:function(){
	return {
	count:0
	}
}

data对象是对象
var value= {
count : 0
}
data:function(){
return value}

四、vue路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

五、vue.js Ajax

5.1 vue-resource

Vue 要实现异步加载需要使用到 vue-resource 库。

<script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>

5.2 get请求

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="js/vue.js"></script>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
        <script src="https://cdn.staticfile.org/vue-resource/1.5.1/vue-resource.min.js"></script>
		<title></title>
	</head>
	<body>
		<div id="box">
    <input type="button" @click="get()" value="点我异步获取数据(Get)">
</div>
	</body>
</html>
<script>
	window.onload = function(){
		var vm = new Vue({
			el:'#box',
			data:{
				msg:'hello world',
			},
			methods:{
					
				get:function(){
					//发送get请求a
					this.$http.get('a.txt').then(function(res){
						document.write(res.body);
					},function(){
						console.log('请求失败处理');
					});
				}
			}
		});
	}	
</script>

5.3 post请求

参考文档:https://www.runoob.com/vue2/vuejs-ajax.html
都是上面的内容，直接参考这个地址！！！

初心魏

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue.js框架

一、Vue.js框架1.1 概念构建用户界面的渐进式框架只关注图层，采用自底向上增量开发的设计目标是通过尽可能简单的API实现相应的数据绑定和组合的视图组件。1.2 入门程序<!DOCTYPE html><html> <head> <meta charset="utf-8"> <script src="js/vue....
复制链接

扫一扫

专栏目录