初学Vue（一） -- Vue简单入门

Alliot 发布于2019-08-23 18:05 / 2784人阅读

摘要：可以进行计算从开始计数双向绑定数据和输出绑定事件书写区事件区域，所有事件控制写在这里有简写形式可以直接把替换为，。

vue - 国人开发制作的

类似于 view 的发音

vue经过了几次大的版本波动

0.x 0.6版本

1.x 版本

2.x 版本 - 现在常用的

为什么要介绍版本改动呢，因为不同版本语法和用法有差别，用起来比较麻烦

react 因为版权原因，导致百度等企业转用vue，导致vue突然火起来，也有支持国人的成分，当然其中的也缺不了它的确好用。

完整版演示代码

正式部分

vue学习建议先学会js，json

有的人觉得vue或angular不够jquery方便，首先，vue和angular是数据驱动的，而jquery是事件驱动的，也就是说用jquery需要想着给赋予事件，而vue与angular只要想着数据怎么变化就行了。

vue1.0下载

vue2.0下载

vue使用

html部分：
//首先当然是引入vue.js文件


//vue标准是要用两对花括号圈住数据名的
{{msg}}


js部分：
//使用vue要先new 一个vue对象出来传入json格式的数据

{{}} -> 必须在作用域里面放入输出的模板，模板里面放入data里面你自己定义的变量

注意：只有ie8 以上的浏览器才能兼容vue

如何选取class或id为作用域


    {{msg}}

常用指令

类似于angular 的常用指令有 ng-show /ng-repeat，vue当然也有。

v-show：类似于display，true就是显示false就是隐藏

v-for：循环输出数组或json数据

    {{i}}{{$index}}
    {{i}}
    {{key}}=>{{value}}
    {{$key}}=>{{i}}

v-for: {{$index}} -> 索引值，{{$key}} -> key值

因为json是键值对，可以理解为数组的索引与值的关系，所以可以用不同方式访问。

{{$index}}可以进行计算 => {{$index+10}} 从10开始计数

v-model：双向绑定 -- 数据和输出绑定


    
        
    {{msg}}

Vue事件书写区

v-on有简写形式@ ,可以直接把v-on替换为@，@click="change"。

事件对象：event

查看事件对象

这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面

html部分：

//这里是必须设置这个样式，不然body的大小是根据页面内容调整大小的

`@click="show"是可以传递参数给事件的，当它传递参数时，事件处理的形参不再默认为是时间对象，当我们传递参数给事件又想看事件对象时可以用$event

html部分：



js部分：

事件冒泡：事件冒泡的三种阻止方法

先来看下事件冒泡没有阻止的情况

这些演示里面的html部分关于body与html的样式设置是必须的，不然body与html会按内容的大小填充，而不是布满整个页面

html部分：



    


js部分：

event.cancelBubble=true;

html部分：



    


js部分：

event.stopProgation();

html部分：



    


js部分：

直接在click后接.stop

其中，上面两个event都是原生方法，所以虽然能用，但是还是不够方便，所以这里使用vue方法来

html部分：



    


js部分：

阻止默认事件 -- 两种默认事件阻止方式

event.preventDefault();

这个是原生js方法，能用但是也不够vue方法方便

html部分：
    


            
js部分：

@click.prevent="";

html部分：
    


            
js部分：

键盘事件 -- 键盘监控事件利用keydown/up来监控用户按下了什么按键

键盘监控事件

html部分：
    


    
js部分：

event.keyCode监控用户按键的ASCII码，可以通过查看keyCode来赋予不同按键不同事件，例如通过console.log(event.keyCode);可以看到按键A的键值是65，那么我们可以设置只有当按下A键时才显示的事件

@keydown.65等效于if(e.keyCode==65)

html部分：
    


    
js部分：

可以组合键使用

html部分：
    


    
js部分：

云服务器私有云 vue入门教程 Vue_Vue Vue vue3 学习笔记 (五)——vue3

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104659.html

初学vue.js记录

摘要：初学应该学习哪些知识主要学习基础知识。接下来要学习如何写函数，计算属性。事件处理与修饰符事件通过指令来绑定，在中事件为事件名，所以是很好记忆的。这时可通过来获取父组件传递的值并写入模板，父组件可通过在子组件写入属性的方式传递数据。前言本人刚开始学习vue.js几天，做了一些练习之后，鉴于每隔一段时间就把学习过的内容总结一番，故此写下此文章。初学Vue.js应该学习哪些知识 1、 v...

enda 2019-08-22 15:34 评论0 收藏0
vuex其实超简单,只需3步

摘要：每一条被记录，都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候，回调函数还没有被调用，不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

binta 2019-08-02 11:53 评论0 收藏0
vuex其实超简单,只需3步

摘要：每一条被记录，都需要捕捉到前一状态和后一状态的快照。然而，在上面的例子中中的异步函数中的回调让这不可能完成因为当触发的时候，回调函数还没有被调用，不知道什么时候回调函数实际上被调用实质上任何在回调函数中进行的状态的改变都是不可追踪的。前言之前几个项目中,都多多少少碰到一些组件之间需要通信的地方,而因为种种原因,event bus 的成本反而比vuex还高, 所以技术选型上选用了 v...

summerpxy 2019-08-23 12:38 评论0 收藏0
超简单入门Vuex小示例

摘要：写在前面本文旨在通过一个简单的例子，练习的几个常用方法，使初学者以最快的速度跑起来一个的示例。生成基于的项目基于脚手架生成一个项目常用命令项目名进入项目目录，使用先试着跑一下。子组件可以修改父组件和自己的数据。写在前面本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vuex的示例。学习vuex需要你知道vue的一些基础知识和用法。...

linkin 2019-08-22 13:52 评论0 收藏0