vue基础篇

最新推荐文章于 2022-07-24 20:42:21 发布

keep789

最新推荐文章于 2022-07-24 20:42:21 发布

阅读量329

点赞数

分类专栏： Vue 文章标签： vue基础计算属性 axios

本文链接：https://blog.csdn.net/keep789/article/details/81873659

版权

Vue 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

本文主要从vue的基础概念、和其他框架的对比、基础语法、基础指令、计算属性、监听、过滤器以及交互来解读vue框架。

vue是什么

Vue.js是一个构建数据驱动的web界面的渐进式框架。目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅易于上手，还便于与第三方库或既有项目进行整合。

作者：尤雨溪

注：渐进式框架-----自底向上、增量开发。

MVC和MVVM框架：

MVC是Model View Controller的简写，即模型(model)－视图(view)－控制器(controller)。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
　　通常模型对象负责在数据库中存取数据。

View（视图）是应用程序中处理数据显示的部分。
　　通常视图是依据模型数据创建的。

Controller（控制器）是应用程序中处理用户交互的部分。
　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVVM是Model-View-ViewMode的简写,即模型（Model）-视图（View）-视图模型（ViewModel）。

Model（模型）：后端传递的数据，

View（视图）：所看到的页面，

ViewModel（视图模型）：mvvm模式的核心，它是连接view和model的桥梁

它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。

vue对比angularjs

vue设计之初借鉴了很多angularjs的思想
vue相对于angular较简单
vue（轻量级框架）比angular（重量级框架）小巧，运行速度较快
vue与angular数据绑定都是双括号插值法{{}}
vue指令用v- xxx angularjs用ng- xxx
vue数据绑定在data对象里面，angular数据绑定在$scope

注：angular和angularjs是两个框架，angularjs出现的比较早 backbaejs框架

vue和react对比

vue和react都使用virtual DOM（提高性能，不用加载js脚本）
vue和react都提供了组件化的视图组件
vue和react将注意力集中保持在核心库，有丰富的插件库
react使用jsx渲染页面，vue使用更简单的模板
vue比react运行速度更快

vue基础语法

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例启动的-------Var vm=new Vue({})
基础属性

el:获取执行vue的dom元素-----初始化范围

data:存储数据

methods:执行的方法

注：构造函数优点：
1、可以保证该对象属性私有
2、有proto原型，方法共享，继承

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--bootcdn上面去下载vue插件，或者官网下载-->
		<script src="8-20/js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
        /*执行vue的dom元素*/
		<div id="out">
			<h1>{{tit}}</h1>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#out",
			data:{
				tit:"hello"
			},
			methods:{
				
			}
		})
	</script>
</html>

vue基础指令

1.绑定数据

{{}} 双括号插值法，只能绑定纯文本，里面可以写表达式，表达式可以是进行简单的逻辑处理，如加减乘除三目运算等

v-text="" 只能绑定纯文本，不解析标签

v-html="" 可以解析html标签

//不带标签
<h1>{{tit}}</h1>
<p v-text="tit"></p>
<p v-html="tit"></p>
//带标签
<p>{{str}}</p>
<p v-text="str"></p>
<p v-html="str"></p>
//vue实例里面
data:{
	tit:"hello",
	str:"<h2>hahaha<h2>",
    }

//{{}}里面可以处理简单逻辑
<h2>{{a*b+a+b}}</h2>
<h2>{{flag?'haha':'www'}}</h2>

//写data里面
a:20,
b:10,
flag:true,

注：绑定html，angular中用的是ng-bind-html,vue用的是v-html

2.事件绑定

v-on:click=""或者@click="" 绑定事件，事件写在method里面

<button @click="tap($event)">事件一</button>
<button v-on:click="tap2()">事件二</button>
<button @click="tap3()">事件三</button>

methods:{
				tap(e){
					console.log(e)
				},
				tap2(){
					this.tit="hi"
				},
				tap3(){
					
				}
			}

注：事件中有event对象时，函数参数为 $event ；操作数据通过this去操作

3.其他指令

v-for=“item in list” 循环 item循环到的数组值

v-for=“(item,key) in list” key循环到的下标index

<ul>
	<li v-for="item in list">{{item.name}}----{{item.age}}</li>
</ul>
//data里面
list:[
		{name:"小明",age:"20"},
		{name:"小芳",age:"18"},
		{name:"小红",age:"22"},
]

v-model=“” 表单元素value 不可直接{{}}获取，需在vue初始化设置一下

<input type="text" v-model="ipt" />
<textarea name="" rows="" cols="" v-model="ipt"></textarea>
<input type="checkbox" v-model="ipt" />
<input type="radio" value="男" name="sex" v-model="ipt"/>
<input type="radio" value="女" name="sex" v-model="ipt"/>

<select v-model="ipt">
	<option value="apple">苹果</option>
	<option value="li">梨</option>
	<option value="tao">桃子</option>
</select>
<p>{{ipt}}</p>

//注：一定要在data里面注册ipt=""

v-if 布尔值为true 代表节点消失

V-show布尔值为true 代表节点设置了display:none属性

<p v-if="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate in asperiores facere provident beatae perspiciatis repellendus deleniti! Vitae iure deleniti veniam rerum corporis fugiat ducimus tempora natus quos sapiente cumque?</p>
<p v-show="false">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate in asperiores facere provident beatae perspiciatis repellendus deleniti! Vitae iure deleniti veniam rerum corporis fugiat ducimus tempora natus quos sapiente cumque?</p>

V-once 一次渲染

<h1 v-once="tit">{{tit}}</h1>
<p v-text="tit"></p>
<p v-html="tit"></p>
<button @click="tap3()">事件三</button>

//data中
tit:"hi"  
//methods中
tap3(){
		this.tit="hello"
}

//结果是v-once中不再渲染

V-if 与 v-else-if v-else 可以构成判断，可以嵌套写，但是不能插入其他结构，否则报错

<p v-if="num>10">{{num}}大于10</p>
<p v-else-if="num>=0&&num<=10">
		<p v-if="num==0">{{num}}等于0</p>
		<p v-else-if="num==10">{{num}}等于10</p>
		<p v-else>{{num}}大于0小于10</p>
<p v-else="num<0">{{num}}小于0</p>

num:9

4.行间样式设置

1)对象的形式设置

v-bind:style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”

data: {

activeColor: 'red',

fontSize: 30

}

<p v-bind:style="{color:col,background:bac}">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex eligendi vel laudantium a esse dolorum aut nam modi quod obcaecati quibusdam rerum enim quae! Inventore doloremque sit suscipit reiciendis fuga.</p>

//data里面
col:'red',
bac:'yellow',

2)数组样式形式设置

v-bind:style=“[styleObjectA, styleObjectB]”

data: {

styleObjectA: {

color: 'red'

styleObjectB: {

fontSize: '30px'

}

<p v-bind:style="[stya,styb]">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente officia neque nulla mollitia optio blanditiis magnam cupiditate quaerat itaque molestias nesciunt aliquam ad sit quis eum inventore modi molestiae? Ex!</p>

//data中
stya:{
		color:'blue',
		border:'1px solid red'
},
styb:{
		background:'pink'
},

注：v-bind:style的对象语法十分直观——看着非常像 CSS，其实它是一个JavaScript对象

5.类名设置

1)一般设置 v-bind:class=“{‘class-a’:isa,‘class-b’:isb}” Isa isb 值为true 添加相应类名，为false 不添加类名

<h2 :class="{'is-a':isa,'classb':isb}">类名</h2>
//data中
isa:true,
isb:true,

2)对象形式设置

classobj:{

active:true,

'class-a':true,

'class-b':true

}

<h2 :class="classobj">类名－变量 </h2>
//data中
classobj:{
		'active':true,
		"classA":false,
		"classB":true
},

注：当有多个类名时建议用对象的形式来设置；v-bind:class可以简写成：class

绑定属性 v-bind:id=“data内的属性值” 或者 :id=“data内的属性值” 两种方法（src title class name等属性写法一样）

vue计算属性

在 Vue.js 中，你可以通过 computed 选项定义计算属性，计算属性放在computed:{//函数} 中

和methods相比：计算属性效率高，methods效率低，还需要事件调用。
和模板相比：模板中的表达式只用于简单的操作，模板是为了描述视图的结构的，模板中放入过多的逻辑会造成模板过重且难以维护。所以Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑，应当使用计算属性。

vue监听

两种写法：

vm.$watch(‘’,function( newvalue,oldvalue){ })
直接在vue初始化中通过watch｛msg:function(newvalue,oldvalue){}｝监听

vue过滤器

写法：

Vue.filter(‘过滤器名字’,function(value){

return //具体操作

})

vue数据交互

1. 应用fetch或axios 获取数据 axios 是vue2.0提供的方法

需要引入 axios.js,插件网址 https://github.com/mzabriskie/axios

//Eg:get方式
var _that=this;   /*注意this的作用域*/
 axios.get(url)
  .then(function (response) {
      console.log(response.data.result);
       _that.list=response.data.result;
  })
  .catch(function (error) {
        console.log(error);
  });

2. 应用vue-resource获取数据这是vue1.0提供的方法

地址：github 搜索 resource https://github.com/pagekit/vue-resource

Eg:百度接口
var api='https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=php';
var that=this;
this.$http.jsonp(api,{
    jsonp:'cb'
}).then(function(data){
    console.log(data.body);

    that.list=data.body.s;
            
 },function(){


 })

vue键盘事件和冒泡事件

阻止事件冒泡两种方法：第一种是加.stop--->@click.stop="zii()；第二种是e.cancelBubble=true;
键盘事件两种写法：第一种是后面加键盘英文@keydown.enter="down()"；第二种是加键盘代表的ASALL码@keydown.13="down()"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue---事件冒泡和键盘事件</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="out">
			<div id="fu" @click="fu()">
				父元素
				<button @click.stop="zii()">子元素</button>
				<button @click="zi($event)">子元素</button>
			</div>
			<input type="text" v-model="ipt" @keyup.left="tap()" @keydown.enter="down()"/>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#out",
			data:{
				ipt:""
			},
			methods:{
				fu(){
					console.log("父元素")
				},
				zi(e){
					e.cancelBubble=true;
					console.log("子元素")
				},
				zii(){
					console.log("zi")
				},
				tap(){
					console.log("松开触发")
				},
				down(){
					console.log("按下触发",this.ipt)
				}
			}
		})
	</script>
</html>

补充：

vue是一款前端框架。前端开发，移动端web app都可以用vuejs，它主要做两件事，一个js数据同步的渲染，第二个模块化开发，组件化开发，提高效率和复用性，第三个，你可以配合很多实用工具，比如router（利用html5控制页面跳转），vuex，页面数据状态管理，vue-resource，数据请求。
2016年的5月份发布的vue.js2.0，现在最新版本是2.2.6
Vue.js 的运行过程实际上包含两步。第一步，编译器将字符串模板（template）编译为渲染函数（render），称之为编译过程；第二步，运行时实际调用编译的渲染函数，称之为运行过程。由于 Vue.js 1.0 的编译过程需要依赖浏览器的 DOM