本地应用

文章目录

本地应用
- 1.内容绑定，事件绑定
- - v-text
  - v-html
  - v-on(为元素绑定事件)
  - - 事件引发弹出窗口
    - 点击改变文本
    - **计数器**
- 2.显示切换，属性绑定
- - v-show
  - v-if
  - v-bind
  - 实例：图片切换
- 3.列表循环，表单元素绑定
- - v-for
  - v-on补充
  - v-model
- 案例：记事本
- - 1.新增（使用v-for显示列表，用v-on绑定回车键，添加任务）
  - 2.删除（splice删除数组元素，响应式更新页面）
  - 3.统计（数组length）
  - 4.清空(清空数组)
  - 5.隐藏（没有元数据时隐藏元素v-show，v-if）
- 总结

DOM：获取元素，操纵它们

vue.js: v开头语法 --> vue指令

1.内容绑定，事件绑定

v-text

 <div id="app"><h2 v-text="message+'!'">四川</h2><h2 v-text="info+'!'">四川</h2><h2>{{ message+"!" }}四川</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{message:"李云龙",info:"意大利炮"}})</script>

v-text替换全部，{{}}替换部分

字符串拼接用+（逻辑运算）

v-html

当data内容为html内容可以解析出来，普通文本和v-text相同

 <div id="app"><p v-html="content"></p><p v-text="content"></p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{content:"<a href='http://www.baidu.com'>李云龙</a>"}})</script>

v-on(为元素绑定事件)

<input type="button" value="事件绑定" v-on:事件名="方法">/<input type="button" value="事件绑定" @事件名="方法">

methods(与data，el平级)

事件引发弹出窗口

<div id="app"><input type="button" value="单击" v-on:click="doWr"><input type="button" value="移到" v-on:mouseenter="doWr"><input type="button" value="双击" v-on:dblclick="doWr"><input type="button" value="简写双击" @dblclick="doWr"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",methods:{doWr:function(){alert("按错了！！！");}}})</script>

更复杂的方法（如修改页面元素显示），不用操作DOM元素

vue特点是页面由数据生成，数据改变，页面就会改变

点击改变文本

<div id="app"><h2 @click="changeWeapon">{{ weapon }}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{weapon:"意大利炮"},methods:{changeWeapon:function(){this.weapon+="哪儿呢？"}}})</script>

计数器

 <div id="app"><div class="input-num"><button @click="sub">-</button><span>{{ num }}</span><button @click="add">+</button></div></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{num:1},methods:{add:function(){//console.log('add');if(this.num<10){this.num++}else{alert("数字不能超过10！")}},sub:function(){if(this.num>0){this.num--}else{alert("数字不能小于0！")}}}})</script>

2.显示切换，属性绑定

根据表达式的真假，切换元素的显示和隐藏

img src使用相对路径，考虑服务器的安全性，浏览器是不允许页面直接读取本地硬盘资源的，因为这违反了浏览器的同源策略（即html文件与图片不在用一个域）。HTML 里用的是相对路径，即用网页服务器的root 文件夹为起始，而不允许进入与root平行的或高于网页服务器root 的其它分支路径。

v-show

<div id="app"><input type="button" value="hide and appear" @click="changeIsShow"><img v-show="isShow" src="1.jpg" alt=""></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{isShow:"false"},methods:{changeIsShow:function(){this.isShow=!this.isShow;}}})</script>

v-if

操纵dom元素

<div id="app"><input type="button" value="切换显示" @click="toggleIsShow"><p v-if="isShow">我是李云龙</p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{isShow:false},methods:{toggleIsShow:function(){this.isShow=!this.isShow;}}})</script>

v-show和v-if的区别：前者操纵样式，后者操纵元素（本质是删除dom元素和添加）

v-show用于频繁切换元素时，反之用v-if。

v-bind

设置元素属性（src,title,class）

v-bind:属性名=表达式，可简写为**:属性名=表达式**

 <style>.active{border: 1px solid red;}</style>
</head>
<body><div id="app"><img v-bind:src="imgSrc" alt=""><br><img :src="imgSrc" alt="" :title="imgTitle+'意大利炮'" :class="isActive?'active':''" @click="toggleActive"><img :src="imgSrc" alt="" :title="imgTitle+'意大利炮'" :class="{active:isActive}" @click="toggleActive"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{imgSrc:"1.jpg",imgTitle:"李云龙",isActive:false},methods:{toggleActive:function(){this.isActive=!this.isActive;}}})</script>
</body>

img class是CSS样式名。

需要动态增删class时使用 isActive?'active':''和{active:isActive}（推荐）可相互替换。

实例：图片切换

<div id="app"><img :src="imgArr[index]"><!--左箭头--><a href="javascript:void(0)" v-show="index!=0" @click="prev"class="left"><img src="./img/prev.png" alt=""></a><!--右箭头--><a href="javascript:void(0)" v-show="index<imgArr.length-1" @click="next"class="right"><img src="./img/next.png" alt=""></a> </div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{imgArr:["./img/1.jpg","./img/2.png","./img/3.jpg",],index:0},methods:{prev:function(){this.index--;},next:function(){this.index++;}}})</script>

3.列表循环，表单元素绑定

v-for

根据数据形成列表结构：数组（最常用），字符串，迭代器

<div id="app"><input type="button" value="添加evol" @click="addevol"><input type="button" value="删除第一个evol" @click="removeevol"><ul><li v-for="(item,index) in arr">{{ index+1 }} 恋与制作人：{{ item }}</li><h2 v-for="item in evol" :title="item.name">{{ item.name }}</h2></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app",data:{arr:["李泽言","许墨","周棋洛","白起","凌肖"],evol:[{name:"时间操控"},{name:"复制"},{name:"绝对吸引力"},{name:"风场控制"},{name:"雷电控制"}]},methods:{addevol:function(){this.evol.push({name:"绝对控制力"})},removeevol:function(){this.evol.shift()}}})</script>

v-on补充

传递自定义参数（函数传参），事件修饰符

 <div id="app"><input type="button" value="click" @click.right="doIt"><input type="text" @keyup.enter="sayHi"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app=new Vue({el:"#app"，methods:{doIt:function(p1){console.log("do it");console.log(p1);},sayHi:function(){alert("宁吃了吗？")}}})</script>

v-model

设置和获取表单元素的值（双向数据绑定：表单和data中的值）

案例：记事本

1.新增（使用v-for显示列表，用v-on绑定回车键，添加任务）

<header class="header"><h1>李云龙的记事本</h1><input v-model="inputValue" @keyup.enter="addthing" autofocus="autofocus" autocomplete="off" placeholder="请输入李云龙的任务" class="new-todo"></header><!--列表区域--><section class="main"><ul class="todo-list"><li class="todo" v-for="(item,index) in todolist"><div class="view"><span class="index">{{ index+1 }}.</span><label>{{ item }}</label><button class="destory"></button></div></li></ul></section>

2.删除（splice删除数组元素，响应式更新页面）

删除键

<button class="destory" @click="remove(index)"></button>

methods

remove:function(index){this.todolist.splice(index,1);}

3.统计（数组length）

 <footer class="footer"><span class="todo-count"> <strong>{{ todolist.length }}</strong> items left </span></footer>

4.清空(清空数组)

<button class="clear-completed" @click="clear">clear</button>clear:function(){this.todolist=[];}

5.隐藏（没有元数据时隐藏元素v-show，v-if）

<footer class="footer" v-show="todolist.length!=0"><span class="todo-count" v-if="todolist.length!=0"> <strong>{{ todolist.length }}</strong> items left </span><br><button v-show="todolist.length!=0"class="clear-completed" @click="clear">clear</button></footer>

添加在父元素或者子级元素根据自己需要决定

总结

vue开发是基于数据，响应式开发，数据改变，页面也随之渲染。之前只是首先对dom元素的获取。

vue笔记——本地应用相关推荐

Vue笔记大融合总结
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端自学Vue笔记干货（第一版，持续更新中~~~）
学习笔记 Vue笔记 nprogress使用 npm i nprogress -S 基本上都是在对axios进行二次封装.前置守卫路由或者封装成工具函数的.js文件中用到 import nprogre ...
Vue笔记随笔---kalrry
Vue笔记随笔---kalrry VUE vue框架的两大核心: 一.前端开发历史二.MV*模式库 VS 框架 MVC架构模式 MVP架构模式 MVVM架构模式 vue是MVVM 三.开发工具四 ...
Vue笔记_03_使用Vue脚手架
Vue笔记_03_使用Vue脚手架第三章使用Vue脚手架初始化脚手架说明具体步骤项目文件分析 pack-lock-json assets文件夹 components文件夹 main.js ...
react和vue配置本地代理
React 在react中配置开发环境下的本地代理相对比较简单,直接在package.json文件中修改即可. 但是这样做有其局限性,如果开发中代理多个接口的时候将无法满足需求,我们需要的是下面这种的 ...
vue笔记（一）基本使用、数据检测
vue 官网 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用. 一.基本使用二.数据检测一.Vu ...
vue笔记（二）Vue-class与style、事件、计算属性、数据监听、指令+自定义指令、过滤器
vue官网一 .class.style操作二.事件三.计算属性四.数据监听.观测五.指令+自定义指令六.过滤器一 .class.style操作官网 1. class使用: (1)v-b ...
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢？
[vue] 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢? 1.检查nginx配置,是否正确设置了资源映射条件: 2.检查vue.config.js中是否配置了publicPath ...
解决 VUE：本地运行和服务器上运行样式不一致，run、build 运行时样式有出入
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 1. 我的情况: 我遇到 2 种情况,一个是表格的分页样式有变化.另一个是导航菜单样式有变化. 2. ...

vue笔记——本地应用