内容绑定，事件绑定

-v-text（设置标签的文本值）

<!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>v-text</title>
</head>
<body><div id="app"><!-- 正常写法 --><!-- 全替换写法,一般不推荐，使用了v-text后H2标签包含内容会被全部替换 --><h2 v-text="message">123213123</h2><!-- 插值表达式写法 --><h2>你好的英文是{{message}}</h2><!-- 字符串拼接一个！的插值表达式写法 --><!-- 全替换写法,一般不推荐，使用了v-text后H2标签包含内容会被全部替换 --><h2 v-text="message+'!'">123123123</h2><!-- 插值表达式写法 --><h2>你好的英文是{{message+"!"}}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"Hello",}})</script>
</body>
</html>

-v-html（可以类似于v-text，但可以解析html结构）

<!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>v-html</title>
</head>
<body><div id="app"><p v-html="content"></p><p v-text="content"></p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{// content:"Hello",content:"<a href='www.baidu.com'>百度一下，你就知道</a>",}})</script>
</body>
</html>

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

<!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>v-on</title>
</head>
<body><div id="app"><!--<input type="button" v-on:事件名称="方法">可以使用 “@” 代替 “v-on:” 使用<input type="button" @事件名称="方法">--><input type="button" value="v-on指令-单击事件" v-on:click="doIt"><input type="button" value="v-on指令@用法-单击事件" @click="doIt"><input type="button" value="v-on指令-鼠标移入事件" v-on:monseenter="doIt"><input type="button" value="v-on指令@用法-双击事件" @dbclick="doIt"><h2 @click="changeFood">{{ food }}</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{  food:"西兰花炒饭"},methods:{doIt:function(){alert("做程序员！");},// 点击就多拼接一段字符changeFood:function(){// console.log(this.food); //测试this.food += "好好吃"},},})</script>
</body>
</html>

小结，制作计数器

<!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>
</head>
<body><div id="app"><button @click="subtractNum">-</button><!-- <span v-text>{{num}}</span> --><span v-text=>{{num}}</span><button @click="addNum">+</button></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{num:1},methods:{// 对data中变量的更改需要使用到this关键字addNum:function(){if(this.num==10){alert('已经最大了!');} else{this.num++;} },subtractNum:function(){if(this.num==0){alert('已经最小了!');} else{this.num--;} },},})</script>
</body>
</html>

显示切换，属性绑定

v-show（根据表达式的真假，通过操纵css中display切换元素的显示和隐藏）

<!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>v-text</title>
</head>
<body><div id="app"><!-- v-show 的判定结果都是bool值，可以进行简单双符号比较 --><img src="" alt="Picture_1" v-show="isShow"><img src="" alt="Picture_2" v-show="isHidden"><!-- 点击后年龄变为4，v-show变为false --><img src="" alt="Picture_3" v-show="old >=16 " @click="changeOldTo4"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:1,isHidden:0,old:18,},methods:{changeOldTo4:function(){this.old = 4;},},})</script>
</body>
</html>

v-if（根据表达式的真假，通过操纵dom元素来切换元素的去除和恢复，区别于v-show是利用display:none，这个是直接使元素在dom tree中去除，在实际使用中，频繁需要隐藏和现实切换使用v-show，反之使用v-if，操纵dom树对性能影响较大）

<!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>v-if</title>
</head>
<body><div id="app"><input type="button" value="切换isShow" @click="toggleIsshow"><p v-if="isShow">Hello Vue!</p><!-- 对比v-show --><p v-show="isShow">Hello Vue! v-show</p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{isShow:false,},methods:{toggleIsshow:function(){this.isShow = !this.isShow;}},})</script>
</body>
</html>

v-bind（对元素中的属性进行设置，v-bind基本使用方法：v-bind:属性名=表达式，可以不写v-bind，直接使用:元素的写法，通常搭配data中变量进行搭配使用）

<!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><style>.active{border: 1px solid red;}</style>
</head>
<body><div id="app"><!-- 使用三元表达式设置类名 --><img v-bind:src="imgSrc" alt="" :title="imgTitle" :class="isActive?'active':''"@click = "toggleActive"><br><!-- 使用对象的方式设置类名 --><img v-bind:src="imgSrc" alt="" :title="imgTitle" :class = "{active:isActive}"@click = "toggleActive"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{imgSrc:"http://www.liuluyi.cn:9999/wp-content/uploads/2022/11/TheTree.png",imgTitle:"璐懿",isActive:"false",},methods: {toggleActive:function(){this.isActive = !this.isActive;}  },}) </script>
</body>
</html>

列表循环，表单元素绑定

v-for(根据数据操作列表结构)

<!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>
</head>
<body><div id="app"><input type="button" value="添加" @click="add"><input type="button" value="移除" @click="remove"><!-- v-for常常与数组进行搭配使用 --><!-- 语法是(A,B) in array --><ul><li v-for="(city,index) in vagetables" :title="city.name">{{ index+1 }}四大直辖市:{{ city }}</li></ul></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{arr:["bejing","shanghai","tianjin","chongqing"],vagetables:[{name:"西兰花"},{name:"西红柿"},]},methods: {add:function(){this.vagetables.push({name:"牛奶"});},remove:function(){this.vagetables.shift();}},})</script>
</body>
</html>

v-on补充(执行逻辑传递额外的参数，自定义参数，事件修饰符)

<!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>
</head>
<body><div id="app"><!-- 在函数之后传递形参，可以传递多个 --><input type="button" value="点击" @click="doIt(666,'老铁')"><!-- 一个输入框，如果没有enter参数，keyup每输入一个字符都会弹窗，enter之后就只会在会车的时候进行弹窗相当于.enter是在事件之后加上.修饰符来限制事件的触发--><input type="text" @keyup.enter="sayHi"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{},methods: {doIt:function(p1,p2){console.log("do It!");console.log(p1,p2);},sayHi:function(){alert("吃了没？");},},})</script>
</body>
</html>

v-model（获取和设置表单元素的值，也叫做双向数据绑定，其作用为便捷的设置和获取表单元素的值）

<!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>v-model</title>
</head>
<body><div id="app"><!-- input标签是最常见的表单元素 --><input type="text" v-model="message" @keyup.enter="getMessage"><!-- v-test差值表达式，{{}} --><h2 @click="setMessage">{{message}}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>// 创建Vue实例var app = new Vue({el:"#app",data:{message:"Hello",},methods: {getMessage:function(){alert(this.message);},setMessage:function(){this.message= "我已经修改！";},},})</script>
</body>
</html>

Vue本地应用(通过Vue实现常见网页效果)相关推荐

vue本地项目静态资源管理
vue本地项目静态资源管理统一放在src/static里面css,images,js index.html里面使用重置样式 <link rel="stylesheet" h ...
vue-ls vue 本地储存示例
Vue插件,用于从Vue上下文中使用本地Storage,会话Storage和内存Storage 一个vue封装的本地储存的方法. 安装 Npm npm install vue-ls --save Ya ...
vue本地模拟数据之mockjs安装 - cmd篇
一.引言: 在项目中尝试了mockjs,mock数据,实现前后端分离开发. 官网描述mockjs是: 前后端分离不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据. 数据类型丰富通 ...
Vue本地图片循环加载显示不出来，vue img标签 :src地址拼接
Vue本地图片循环加载显示不出来,vue img标签 :src地址拼接上代码: <img:src="img"alt="banner" /> dat ...
vue : 本地调试跨域问题的解决办法：proxyTable
vue : 本地调试跨域问题的解决办法:proxyTable 参考文章: (1)vue : 本地调试跨域问题的解决办法:proxyTable (2)https://www.cnblogs.com/fo ...
vue本地静态图片的路径问题解决方案
vue本地静态图片的路径问题解决方案参考文章: (1)vue本地静态图片的路径问题解决方案 (2)https://www.cnblogs.com/ranyonsue/p/11608760.html ...
在本地如何启动Vue项目
在本地如何启动Vue项目 1).在vue项目的目录下输入命令: npm install 2).运行成功后: 启动项目的方式: 方式一: 命令启动 : vue项目下输入 npm run dev 方式二: ...
vue本地存储案例_本地化还是创意适应？流氓游戏街的案例研究
vue本地存储案例关于游戏<流氓街头> (About the game Streets of Rogue) In 2017 tinyBuild released Streets of R ...
Vue项目部署到云开发前端网页托管｜unicloud版
Vue项目部署到云开发前端网页托管-unicloud版前言创建Vue项目一.检查环境 1.检查`Node`环境 2.检查`Vue`环境二.创建项目 1.项目创建 2.创建成 ...

Vue本地应用(通过Vue实现常见网页效果)

内容绑定，事件绑定

-v-text（设置标签的文本值）

-v-html（可以类似于v-text，但可以解析html结构）

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

小结，制作计数器

显示切换，属性绑定

v-show（根据表达式的真假，通过操纵css中display切换元素的显示和隐藏）

v-bind（对元素中的属性进行设置，v-bind基本使用方法：v-bind:属性名=表达式，可以不写v-bind，直接使用:元素的写法，通常搭配data中变量进行搭配使用）

列表循环，表单元素绑定

v-for(根据数据操作列表结构)

v-on补充(执行逻辑传递额外的参数，自定义参数，事件修饰符)

v-model（获取和设置表单元素的值，也叫做双向数据绑定，其作用为便捷的设置和获取表单元素的值）

Vue本地应用(通过Vue实现常见网页效果)相关推荐

最新文章

热门文章