文档章节

Vue入门学习第一篇

wftt
 wftt
发布于 2018/04/10 17:42
字数 2051
阅读 183
收藏 0

       这是vue入门第一篇,这篇也是最基础的内容,把自己所学总结分享一下,主要介绍的是引用cdn使用vue以及常用指令。之后第二篇将是对vue-cli的介绍,再后期会把实践项目进行分享。

  • 对vue的理解

            vue是渐进式javascript框架,所谓渐进式,指的是没有太多的限制,对使用者要求少,使用起来灵活自由。相比起来,angular限制多,要求:必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件。而vue可以使用优秀的库和框架,也可以很好的和其他项目或框架融合。

下面是在网上看到的一个关于渐进式非常好的理解,引用一下:

在我看来,渐进式代表的含义是:主张最少。
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
比如说,Angular,它两个版本都是强主张的,如果你用它,必须接受以下东西:
- 必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件(这一点每个视图框架都有,难以避免)

所以Angular是带有比较强的排它性的,如果你的应用不是从头开始,而是要不断考虑是否跟其他东西集成,这些主张会带来一些困扰。

比如React,它也有一定程度的主张,它的主张主要是函数式编程的理念,比如说,你需要知道什么是副作用,什么是纯函数,如何隔离副作用。它的侵入性看似没有Angular那么强,主要因为它是软性侵入。

Vue可能有些方面是不如React,不如Angular,但它是渐进的,没有强主张,你可以在原有大系统的上面,把一两个组件改用它实现,当jQuery用;也可以整个用它全家桶开发,当Angular用;还可以用它的视图,搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念,也可以函数式,都可以,它只是个轻量视图而已,只做了自己该做的事,没有做不该做的事,仅此而已。
渐进式的含义,我的理解是:没有多做职责之外的事。

  • 引用cdn:打开官网,查看引入cdn的方式。

           

  • 常用指令知识点总结

            1.初始化vue对象后结构:                

// 实例化vue对象
var obj = new Vue({
	el:"#vue-app",    //el:element 需要获取的元素,一定是html中的根容器元素.
	data:{            //data:用于数据的存储
		
	},
	methods:{	     //methods:用于存储各种方法
		
	},
	computed:{
		
	}              
});

            2.v-html:                   

//HTML
<a v-bind:href="website">百度一下</a>                //绑定跳转链接
<p v-html="websiteTag"></p>                    //a标签,注意这里直接{{websiteTag}}是不可以的

//script
data:{          
	website:"http://www.baidu.com",
	websiteTag:"<a href='http://www.baidu.com'>百度</a>"
}

            3. v-bind:给属性绑定对应的值。动态地绑定一个或多个特性,或一个组件 prop 到表达式.

             4.v-model:实现数据的双向绑定

//HTML

<!--v-model已经实现input和name的双向数据绑定-->
<label>姓名:</label><input type="text" v-model="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-model="age">
<span>{{age}}</span>


<!--实现绑定的另一种方法,使用了$refs-->
//HTML
<label>姓名:</label><input type="text" v-on:keyup="logName" ref="name">
<span>{{name}}</span>
<label>年龄:</label><input type="text" v-on:keyup="logAge" ref="age">
<span>{{age}}</span> 

//script
methods:{		
	logName:function(){	
		this.name = this.$refs.name.value;	
	},
	logAge:function(){	
		this.age = this.$refs.age.value;
	}
	
}



            5.v-for: 对数组进行列表渲染.           

//HTML
<ul>
	<li v-for="character in characters">{{character}}</li>
</ul>

<ul>
	<!-- <li v-for="user in users">{{user.name}}:{{user.age}}</li> -->
	<li v-for="(user,index) in users">{{index+1}}.{{user.name}}:{{user.age}}</li>
</ul>

//script
data:{
   	characters:["sw","ma","ed"],
	users:[
		{name:"tt",age:"20"},
		{name:"dd",age:"22"},
		{name:"wf",age:"21"}
	]
}

          扩展: template显示的dom结构没有多于的div,只有h3和p标签,而第一段代码有多于的div,其实性能是不好的。

<div v-for="(user,index) in users">
	<h3>{{index}}.{{user.name}}</h3>
	<p>Age - {{user.age}}</p>
</div> 

<template v-for="(user,index) in users">
	<h3>{{index}}.{{user.name}}</h3>
	<p>Age - {{user.age}}</p>
</template>

             6.v-show:是对display的切换,dom一直存在,满足条件显示,否则隐藏。

             7.v-if:显示时dom存在,不显示即没有dom。

//error和success初始值都为false
<button @click="error=!error">Toggle Error</button>
<button @click="success=!success">Toggle Success</button>

<p v-if="error">网络链接错误:404</p>
<p v-else-if="success">网络链接成功:200</p>

<p v-show="error">网络链接错误:404</p>
<p v-show="success">网络链接成功:200</p>

             v-if截图:

            v-show截图:

         8.事件处理:

        (1)v-on:click/@click:

//HTML 
<button @click="add(1)">单击加一岁</button>
<button @click.once="add(1)">只能点一次加一岁</button>
<button v-on:click="substract(1)">单击减一岁</button>
<button @dblclick="add(5)">双击加五岁</button>
<button v-on:dblclick="substract(5)">双击减五岁</button>
<p>My age is {{old}}</p>

//script
new Vue({
	el:"#vue-app", 
	data:{         
		old:22
	},
	methods:{		
		add:function(inc){
			this.old += inc ;        //使用data中的属性直接this.属性即可
		},
		substract:function(dec){
			this.old -= dec;
		}
   }
})

           (2)v-on:mousemove以及事件修饰符:

//HTML
<!--实现移动鼠标获取x和y位置,显示在canvas内,移动到Stop Moving位置不变化效果 -->
<div id="canvas" v-on:mousemove="updateXY">    
	{{x}},{{y}} - 
	<!-- <span v-on:mousemove="stopMoving">Stop Moving</span> -->   //调用方法阻止冒泡事件
	<span v-on:mousemove.stop="">Stop Moving</span>    //利用修饰符直接使用.stop达到同样效果
</div>


//效果:点击后执行alert方法,不跳转百度网页,如果没有prevent则先执行方法后跳转网页。
<a v-on:click.prevent="alert" href="http://www.baidu.com">百度</a>

//script
methods:{		
	updateXY:function(event){
	    // console.log(event)
		this.x = event.offsetX;
		this.y = event.offsetY;
	},
	stopMoving:function(event){
		event.stopPropagation();
	},
	alert:function(){
		alert("hello");
	}
}

          (3)键盘事件:

//HTML
<!--按下enter才会执行logName方法 -->
<label>姓名:</label><input type="text" v-on:keyup.enter="logName">
<!--同时按下enter和alt才会执行logAge方法 -->
<label>年龄:</label><input type="text" v-on:keyup.alt.enter="logAge">

//script
methods:{	

	logName:function(){
	    console.log("正在输入名字...");
	},
	logAge:function(){
		console.log("正在输入年龄...");
	}
}

          9.class和style绑定:class的显示与否取决于后面的true和false。

<h4 v-bind:class="{red:true,blue:true}">示例1</h4>

结果渲染如下:

传入多个属性动态切换class,在computed中设置:

<h4>示例2</h4>
<button @click="changeColor=!changeColor">change color</button>
<button @click="changeLength=!changeLength">change length</button>
<div v-bind:class="compClasses">
	<span>henry</span>
</div>
computed:{
	compClasses:function(){
		return {
			changeColor:this.changeColor,
			changeLength:this.changeLength
		}
	}
}          

         10.多个实例化对象的初始化,修改第一个的属性时可以在第二个里面直接修改。

//HTML 两个根容器
<div id="vue-app-one">
	<h2>{{title}}</h2>
</div>
<div id="vue-app-two">
	<h2>{{title}}</h2> 
    <button @click="changeTitle">修改app-one的标题</button>
</div>

//script  两次初始化,多个类似
var one = new Vue({
	el:"#vue-app-one",
    data:{
       title:'这是app-one的内容'
    },
    methods:{

    }
})
var two = new Vue({
	el:"#vue-app-two",
    data:{
       title:'这是app-two的内容'
    },
    methods:{
       changeTitle:function(){
          one.title = "app-one的标题已经被改变了!";        //在第二个中修改第一个
       }
    }
})

two.title = 'app-two的标题也发生改变了!';              //修改app-two标题

        11.vue组件:

//HTML
<h2>vue组件</h2>
<div id="vue-app-one">
	<greeting></greeting>
</div>
<div id="vue-app-two">
	<greeting></greeting>
</div>

//script
Vue.component("greeting",{
	template:"<p>{{name}}:hello,介绍vue组件<button @click='changeName'>改名字</button></p>",
	data:function(){
		return {
			name:'tt'
		}
	},
	methods:{
		changeName:function(){
			this.name = 'henry';
		}
	}
})

new Vue({
	el:"#vue-app-one"
})
new Vue({
	el:"#vue-app-two"
})

                                                  点击后:   

        12.{{方法()}}调用方法时,不加()没法识别;而在事件调用方法时,可以不加(),需要传参数要加()。

        13.计算属性:

methods中有多个方法时,点击一个按钮方法都会执行,消耗大。此时可以使用computed,用于变化幅度大,耗时和大量搜索,实际上操作虚拟dom,就会达到点击某个只执行某个方法。

 computed:

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
你可能需要的一本前端小册:Vue 项目构建与开发入门

最近抽时间写了一本关于 Vue 的小册:《Vue 项目构建与开发入门》,前前后后断断续续花了大概两个月的时间。作为 Vue 的第一批用户,同时也作为一名专栏作者,虽然我之前写过好几篇关于 Vue ...

劳卜
2018/11/28
0
0
Vue新手向:14篇教程带你从零撸一个Todo应用

欢迎来到 Vue2.x Todo 系列教程,这个教程将手把手教你从零开始使用 Vue 搭建一个 Todo(待办事项)应用。 书写此教程的动机 Vue 作者尤雨溪在 新手向:Vue 2.0 的建议学习顺序 中给出了中肯...

追梦人物
01/16
0
0
Vue入门指南-06 Vue中的动画(快速上手vue)

Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate.css 在过渡钩子函数中...

番茄炒蛋少放糖
03/30
0
0
解决vue多个路由共用一个页面的问题

本次为大家分享一篇解决vue多个路由共用一个页面的问题,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢迎批评指正。 在日常的vue开发中我们可...

前端攻城老湿
2018/12/18
0
0
vue入门环境搭建及demo运行

vue简介: Vue.js 是一套构建用户界面的渐进式框架。他自身不是一个全能框架——只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。在与相关工具和支持库一起使用时,V...

挑战者666888
2018/05/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rime设置为默认简体

转载 https://github.com/ModerRAS/ModerRAS.github.io/blob/master/_posts/2018-11-07-rime%E8%AE%BE%E7%BD%AE%E4%B8%BA%E9%BB%98%E8%AE%A4%E7%AE%80%E4%BD%93.md 写在开始 我的Arch Linux上......

zhenruyan
今天
5
0
简述TCP的流量控制与拥塞控制

1. TCP流量控制 流量控制就是让发送方的发送速率不要太快,要让接收方来的及接收。 原理是通过确认报文中窗口字段来控制发送方的发送速率,发送方的发送窗口大小不能超过接收方给出窗口大小。...

鏡花水月
今天
10
0
OSChina 周日乱弹 —— 别问,问就是没空

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @tom_tdhzz :#今日歌曲推荐# 分享容祖儿/彭羚的单曲《心淡》: 《心淡》- 容祖儿/彭羚 手机党少年们想听歌,请使劲儿戳(这里) @wqp0010 :周...

小小编辑
今天
1K
11
golang微服务框架go-micro 入门笔记2.1 micro工具之micro api

micro api micro 功能非常强大,本文将详细阐述micro api 命令行的功能 重要的事情说3次 本文全部代码https://idea.techidea8.com/open/idea.shtml?id=6 本文全部代码https://idea.techidea8....

非正式解决方案
今天
5
0
Spring Context 你真的懂了吗

今天介绍一下大家常见的一个单词 context 应该怎么去理解,正确的理解它有助于我们学习 spring 以及计算机系统中的其他知识。 1. context 是什么 我们经常在编程中见到 context 这个单词,当...

Java知其所以然
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部