学会vue能干嘛（【学Vue就跟玩一样】学习vue就像打游戏一样简单）
目录
前言
一 ，初入Vue大陆
1.Vue的初体验
1.Vue的特点
2.引入vue
3.可能出现的问题
4.创建Vue实例
5.模板语法
6.数据绑定
7.连接容器的方法
8.data的写法
二 ，MVVM模型
三 ，数据代理
1.对数据进行读取和修改
2.事件修饰符
3.键盘事件
最后
前言
🐳对于看到这篇文章的小伙伴呢！肯定是即将到达四周目Vue篇了吧 ，从此刻开始正式踏入Vue篇 ，内容绝对真实有效 ，本栏会细致的将Vue划分为两大模块 ，基础篇 ，进阶篇 。想要顺利通关vue篇首先要拥有三剑客 ，当然其他的node ajax法宝也会辅佐你通关的 ，在学习的途中如果遇到了问题 ，可以试着回顾一下之前的情节 ，以便于更好的推进主线剧情 ，准备出发!
一 ，初入Vue大陆
1.Vue的初体验
一套用于构建用户界面的渐 进式JavaScript框架
1.Vue的特点1
1.采用的是组件化模式 ，提高代码复用率且让代码更好维护 。
2.声明式编码 ，让程序猿 / 媛无需直接操作DOM,提高开发效率 。
3.使用虚拟DOM和优秀的Diff算法 ，尽量复用DOM节点 。
2.引入vue
找到官网：Vue官网
点击教程
然后选择安装 ，（这里有俩版本 ，一个是开发的 ，一个是生产的 ，一般我们使用vue.js进行学习）
这俩的区别就是有无提示的问题
下载完成之后将vue.js文件放到我们的包里面并且引入
下载Vue扩展Vue扩展 提取码：1127
下载成功并且开启后就会显示这个vue的图标 ，这个可以更好的辅助我们进行vue的相关操作
3.可能出现的问题
问题1：控制台出现提示
如何关闭呢？（打开vue.js文件然后CTRL+f查找 productionTip ，最后再将该语句的true改为false）也可以直接 写上这串代码 Vue. config. productionTip = false；
问题2：出现404的错误
直接去比特冲将一张图片转换为ico图标的样式并且将名称改为favicon.ico即可
问题3：啥错误提示也没看到
打开vscode点击插件 ，查找一个“ Live Serve ”的插件即可
4.创建Vue实例
这里遵循一对一原则 ，一个vue实例只能操作一个容器
<body> <!-- 创建一个容器 --> <div id="root"> <h1>hello,{{name}}</h1> <!-- 使用插值语法用双重花括号包裹{{}} 也就是【vue模板】--> </div> <h1>{{name}}</h1><!-- 这里的Vue实例只是接管了id名为root的容器 ，所以只能再该容器中使用 --> <script> // 创建Vue实例,直传一个参数 new Vue({ el: #root,// el用于指定当前Vue实例为那个容器服务 ，值一般为css选择器字符串 data: { name: Vue小嘎鱼 } }) </script> </body>注：使用Vue的第一步就是创建实例 ，容器里的代码在符合html规范的语法基础上新增了Vue的一些特殊语法 ，容器里的代码被称为[Vue模板] ，Vue实例和容器是一 一对应的 ，在实际开发中有且只有一个Vue实例并且会配合着组件起使用 ，{{js表达式}}且js表达式可以自动读取到data中的所有属性 ，如果data中的数据发生改变 ，那么页面中所有用到该数据的地方也会自动更新
5.模板语法
1.插值语法:
功能:用于解析标签体内容 。
写法: {{js表达式}} ，且可以直接读取到data中的所有属性 。
2.指令语法:
功能:用于解析标签(包括:标签属性 、标签体内容 、绑定事件等)
例: v- bind:href="xx"或简写为 ：href="xxx", xxx同样要写js表达式且可以直按读取到data中的所有属性 。
注: Vue中有很多的指令 ，且形式都是: v-xxx(还有v-model ，v-if等)
6.数据绑定
Vue中有2种数据绑定的方式
1.单向绑定(v-bind):数据只能从data传入页面 。
2.双向绑定(v-model):数据不仅能从data传入页面 ，还可以从页面传入data
3.双向绑定一 般都应用在表单类元素上(如: input 、 select等)
4.v-model:value可以简写为v- model,因为v- model默认收集的就是value值 。
<body> <div class="inp"> <!-- 单向数据绑定只能从data流向页面 ，而双向数据绑定可以互相流动 --> 单向数据绑定：<input type="text" :value="name"><br> <!-- 注：v-model只能应用到表单类元素上 --> 双向数据绑定：<input type="text" v-model:value="name"> </div> <script> new Vue({ el: ".inp", data: { name: 山鱼 } }) </script> </body>7.连接容器的方法
<body> <div class="one"> <h1>你好 ，{{name}}</h1> </div> <script> const a= new Vue({ // el:.one, 第一种写法 data:{ name:shanyu } }) a.$mount(.one)// 第二种写法 </script> </body>直接使用el更简单
使用 实例使用对象原型里面的$mount也可以实现绑定 ，名.$mount(容器名)的方法更灵活
8.data的写法
分别为对象式和函数式
<script> new Vue({ el: .one, // 第一种对象式 data: { name: 山鱼 }, // 第二种函数式 // 这里不可以使用箭头函数 ，箭头函数自身木有this data() { return { name: 山鱼 } } }) </script>二 ，MVVM模型
为什么要了解MVVM模型？其实Vue的尤大大也是收到了MVVM的启发 ，但并不完全使用MVVM ，我们也可以在官网上看到这段话
vm
那MVVM到底代表着什么呢？
其中：M（model模型）：其实就是data中的数据 ，V（View试图）：模板 ，也就是DOM的页面 ，VM（试图模型ViewModel）：Vue实例
其中的vm就是这个b蓝色框内的也就是ViewModel ，他身上的所有属性方法vm都可以使用 ，包括原型对象内的属性方法也可以使用
三 ，数据代理
这里的数据代理为何物呢?通过一个对 象代理对另一个对 象中属性的操作(读/写)
1.Vue中的数据代理:通过vm对象来代理data对象中属性的操作
2.Vue中数据代理的好处:更加方便的操作data中的数据
3.基本原理:通过0bject . defineProperty( )把data对象中所有属性添加到vm上 。为每一个 添加到vm上的属性 ，都指定个getter/setter ，在getter/setter内部去操作(读/写) data中对应的属性 。简单来说就是把data的属性全部都复制给了_data了一份 ，可以让vm进行使用
Object.defineProperty方法（给对象添加属性方法的一个方法）这个方法会传入三个参数分别是对象名 ，属性名 ，配置项 。
<script> let person = { name:山鱼, sex:男, } Object.defineProperty(person,address,{ value:18 }) console.log(person); </script>在这里我们可以看到 ，这个颜色稍微的有点变化（这里就是使用Object.defineProperty方法进行添加的 ，这里的address是不可以进行枚举的 ，即不参与遍历）
这里可以使用Object.keys()进行验证一下 ，结果的确没有拿到这个address（使用for....in也可以）
<script> let person = { name:山鱼, sex:男, } Object.defineProperty(person,address,{ value:18 }) for(k in person){ console.log(k); } console.log(Object.keys(person)); console.log(person); </script>如何让address参与遍历？【这里就使用了之前学过的 enumerable 只要将它的值改为true即可 】
enumerable : true （是否可以被枚举）
writable:true（是否可以修改属性）
configurable: true（是否可以删除改属性）
这四个基本配置项 的内容（包括value）他们的默认值为false
1.对数据进行读取和修改
这里用到了两个方法 ，get和set
<script> let number = 19; let person = { name: 山鱼, sex: 男, } Object.defineProperty(person, address, { //当有人读取person的address属性时 ，get函 数(getter)就会被调用 ，且返回值就是age值 get() { console.log(address属性已被读取); return number; }, //当有人修改person的address属性时 ，set函数(setter)就会被调用 ，且 会收到修改的具值 set(value) { console.log(address属性已被修改); number = value } }) </script>2.事件修饰符
1.prevent:阻止默认事件(常用）
2.stop: 阻止事件冒泡(常用)
3.once:事件只触发一次(常用)
4.capture: 使用事件的捕获模式
5.self: 只有event.target是当前操作的元素是才触发事件
6.passive: 事件的默认行为立即执行 ，无需等待事件回调执行完毕
<div id="user"> <h1>欢迎来到{{name}}的博客之家</h1> <!-- 1 ，阻止默认事件 --> <a href="http://baidu.com" @click.prevent = "showInfo">点我不跳转</a> <!-- 2 ，阻止事件冒泡 --> <div class="one" @click = showInfo> <button @click.stop = showInfo>点我</button> </div> <!-- 3,事件只触发一次 --> <button @click.once = showInfo>只能点一次哦</button> </div> <script> const vm = new Vue({ el:#user, data:{ name:山鱼, }, methods:{ showInfo(e){ alert(泥嚎！同学) } } }) </script>3.键盘事件
常用的按键别名:
回车=> enter ，删除=>delete(捕获“删除 ”和“退格 ”键) ，退出=> esc ，空格=> space ，上=>up ，下=> down ，左=> left ，右=> right
特殊的按键别名：
1.换行=> tab (特殊 ，必须配合keydown使用)
2.系统修饰键 ctrl ，alt ，shift ，meta（meta就是win键也就是windows徽标）
注：配合keyup使用:按下修饰键的同时 ，再按下其他键 ，随后释放其他键 ，事件才被触发 。配合keydown使用:正常触发事件 。
<div class="user"> <h1>欢迎加入{{uname}}</h1> <!--.enter 就是按下回车触发事件 ，也成为按键别名--> <input type="text" placeholder="按下回车提示输入" @keyup.enter = showInfo> <!--删除 del --> <input type="text" placeholder="按下del提示输入" @keyup.delete = showInfo> <!-- 退出esc --> <input type="text" placeholder="按下ESC提示输入" @keyup.esc = showInfo> <!-- 特殊按键别名 --> <input type="text" placeholder="一同按下ctrl+‘其他按键’并释放提示输入" @keyup.ctrl = showInfo> <!-- 自定义别名 --> <input type="text" placeholder="按下回车提示输入" @keyup.huiche = showInfo> </div> <script> // 也可以自定义按键别名 Vue.config.keyCodes.huiche = 13; const vm = new Vue({ el:.user, data:{ uname:山鱼社区 }, methods:{ showInfo(e){ console.log(e.target.value); } } }) </script>写在最后
点赞👍：您的赞赏是我前进的动力！收藏⭐：您的支持我是创作的源泉！
评论✍：您的建议是我改进的良药！山鱼🦈社区:欢迎大家加 山鱼社区 ！
我依旧是小山🐟并且依然在逐渐成长 ，励志成为大撒鱼 ，感谢大家的一路支持
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！