先下载vue.js

将开发版本和生产版本都下载

入门全局配置

html 页面引入vue.js 之后，全局配置一下，将浏览器控制台的开发者版本的提示给关闭

如果我们不配置，代码是

    <script type="text/javascript" src="../js/vue.js"></script>

以上只是引入，在浏览器控制台会有

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script type="text/javascript" src="../js/vue.js"></script>
</head>
<body><script >Vue.config.productionTip = false</script>
</body>
</html>

以上就会关闭

官网会找到全局的配置

浏览器控制台报错

我们直接在浏览器输入IP和端口号，页面展示的是

就是当前的根文件夹，

当我们要访问html页面的时候，需要自己有一个图标

指令语法

v-bind

单向绑定

如果HTML标签属性里面的东西是动态的，那么不能使用{{ }} 了，需要用指令标签，比如链接是动态的，那么我们的写法是

<body><div id="root"><h1>{{name}}</h1><a v-bind:href="url">hhhhh</a></div><script >Vue.config.productionTip = falsenew Vue({el: '#root',  //data:{name:'hhhh',url:'www.baidu.com'} })</script>
</body>

这个指令就是将标签的属性的值动态的进行绑定，有简写方式，直接冒号

        <a :href="url">hhhhh</a>

v-model

双向绑定

这个指定只能适用于表单类元素

 <input type="text" v-model:value="name">

简写：

  <input type="text" v-model="name">

v-on

绑定事件

       <button v-on:click = 'show' >点击</button>简写：<button @click = 'show' >点击</button>

<body><div id="root"><h1>{{name}}</h1><a v-bind:href="url">hhhhh</a><a :href="url">hhhhh</a><input type="text" v-model:value="name"><input type="text" v-model:value="name"><input type="text" v-model="name"><button v-on:click = 'show' >点击</button></div><script >Vue.config.productionTip = falsenew Vue({el: '#root',  //data:function(){return{name:'hhhh',url:'www.baidu.com'}},methods:{show(){alert("ddd")},} })</script>
</body>

我们点击的时候有可能传参，但是有一个默认的参数event，如果我们写了自己的参数，这个原来的event参数咋办，我们可以这样写：

 <button @click = 'show（$event, aa）' >点击</button>

在方法的对应的地方以一个参数接受就可以了

data的两种写法

第一种是

第二种
函数式写法，以后使用组件的使用，用这种函数式的写法

MVVM

事件修饰符

比如我们的a标签有一个href属性，现在我们给这个a标签一个点击属性，具体写法是

本来这个a标签是自己有一个本来的链接，又给了人家一个click的点击事件，现在我们想要的情况是点击之后，只是执行click的点击事件，不要执行href里面的了。
阻止默认的事件：

prevent修饰符

<a href="http://www.baidu.com" @click.prevent="show">a标签</a>

@click后面以点的形式弄出修饰符
prevent 这个修饰符是不会执行href里面的地址

stop 修饰符

阻止事件的冒泡

就是div有一个点击事件，里面的a标签也有一个点击事件。点击了a标签一定也点击了div。所以两个事件都会触发。。

现在我们想点击了A标签，只是触发a标签上面的事件，div上面的事件不触发，也就是防止事件向上的冒泡，我们之前是在a事件方法里面写

现在我们使用了vue的click的点击事件，那么他有一个修饰符stop

   <button  @click.stop="show">a标签</button>

once修饰符

就是这个事件只能触发一次

   <button  @click.once="show">a标签</button>

capture 修饰符

使用事件的捕获模式

<div  class="div1" @click="show(1)">div1<div class="div2"   @click="show(2)">div2</div></div>

捕获阶段，冒泡阶段

我们点击div2，先输出div2的事件，现在我们想要在点击div2的时候，先执行div1的事件

只要加上那个属性就可以了

self 修饰符

    <div @click="show"><button  @click="show">self</button></div>

以上的代码会发生事件冒泡，我们点击的是self这个按钮，他的事件是什么，我们打印看看

虽然外面的事件因为冒泡也会执行，但是这个

打印的是你点击什么打印什么

我们现在想要只有点击的东西和target一样的时候才可以触发事件，那么我们就可以

passive修饰符

也就是事件和同步的方法立即执行

首先画一个这个页面，滑轮滚动

.list{width: 200px;height: 200px;background-color: blueviolet;overflow: auto;}li{height: 100px;}

<ul class="list"><li>22</li><li>22</li><li>22</li><li>22</li><li>22</li><li>22</li></ul>

这个ul有一个滑动事件，并且我们还可以手动给一个事件，就是当他滑动的时候，执行这个事件

有两种滑动，一种是用鼠标按住滑轮进行滑动，一种是滑动鼠标上面的滑轮进行滑动
用scroll 绑定滑动事件，这个是手动进行滑动进行触发，只要到底了，事件就不会进行触发了

还有一个是wheel 事件，这个是用鼠标的滚轮进行滑动

这个是只要鼠标的滚轮进行滑动，就会触发事件，不管到不到底

当我们用wheel做事件，那么里面的方法如果处理的东西很多，那么滚轮我们看不见往下，但是事件方法是一直在执行的

如果加了这个passave修饰符，那么就会看到方法和滚动条一起执行了。

事件修饰符可以连写

有一个需求就是我们的a标签，自己有href ,也可以加事件，外面还有冒泡事件，写法是

点击了之后有3个事件，那么现在可以不仅要阻止冒泡，也要阻止href里面的事件发生，我们就可以连写，写法是

也就是事件的修饰符是可以连写的

VUE2.0 学习（一）HTML单页面使用vue技术相关推荐

【Vue2.0学习】—数据绑定
[Vue2.0学习]-数据绑定 <!DOCTYPE html> <html lang="en"><head><meta charset=& ...
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换
vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在 ...
Vue2.0通过二级路由实现页面切换
vue2.0通过二级路由实现页面切换需求分析:以下歌手列表(singer.vue)页中,点击列表跳转到歌手详情页(singer-detail.vue). 实现方法:使用二级vue-router实现. ...
【Vue2.0学习】—Vuex工作原理图（二十五）
[Vue2.0学习]-Vuex工作原理图(二十五) 一. Vuex 是什么? 概念: 专门在Vue中实现集中式状态(数据)管理的一个Vue插件,对Vue应用中多个组件的共享状态进行集中式的管理(读/写 ...
【Vue2.0学习】—插槽（六十四）
[Vue2.0学习]-插槽(六十四) 作用:让父组件可以向子组件指定的位置插入html结构,也是一种组件间通信的方式,适用于父组件=>子组件分类:默认插槽.具名插槽.作用域插槽默认插槽使 ...
关于html单页面使用vue组件
关于html单页 ...
vue2.0学习——使用webstorm创建一个vue项目
背景:小白自学vue,翻阅了好多大神的博客,看了网上很多的视频,过程很吃力,好在功夫不负有心人,磕磕绊绊的也算入门了,现为自己vue的学习阶段做个小小的总结.vue2.0的基础知识的总结暂时不总结成文 ...
从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十二║Vue实战：个人博客第一版(axios+router)...
前言今天正式开始写代码了,之前铺垫了很多了,包括 6 篇基础文章,一篇正式环境搭建,就是为了今天做准备,想温习的小伙伴可以再看看<Vue 基础入门+详细的环境搭建>,内容很多,这里就暂时 ...
vue2.0聊天室vue-chatRoom|仿微信界面vue+vuex+vueRouter
Vue2.0+Vuex+VueRouter仿微信界面聊天室|仿微信聊天窗口|仿微信群聊基于vue2.0+vuex+webpack2.0+es6+wcPop等技术开发的仿微信聊天室vue-weChat ...

VUE2.0 学习（一）HTML单页面使用vue技术

目录