浅谈VUE uni-app 模板语法
1.v-bind(简写 :)
组件属性中要使用data中定义的数据变量,或组件属性要使用表达式,需用v-bind指定
简写 :
2.v-on(简写@)
监听DOM事件
click.stop 可以阻止事件穿透
3.v-model
数据双向绑定
4.v-if,v-else-if,v-else
条件判断,决定某个内容是否挂载
5.v-show
条件判断,决定某个内容是否显示
6.三元运算符
7.空标签 block
8.v-for:列表渲染
<template> <view v-bind:class="msg" v-bind:data="1+2"> {{msg}} world!-{{num}} <button v-on:click="show">点我</button> <input v-model="msg" /> <view v-if="flag">vue</view> <view v-else>H5</view> <view>{{flag ? '显示':'隐藏'}}</view> <block> <text>block 空标签 </text> </block> <view v-for="(item, index) in arr">{{index+1}}:{{item}}</view> <view @click="c1"> 父级 <view @click.stop="c2">子级</view> </view> </view> </template> <script> export default{ //初始化数据, //data:{},使用对象形式数据不会发生变化,不推荐 data(){ return { msg:'hello',//变量 arr:['vue','H5','CSS'],//数组 flag:true,//布尔值 num: 1 } }, onLoad(){ setTimeout(()=>{ this.num++; },2000) }, methods:{ show(){ console.log('点了'); this.flag=!this.falg; }, c1(){ console.log('我是父级'); }, c2(){ console.log('我是子级'); } } } </script>
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
浅谈VUE uni-app 开发环境
目录 1.通过 HBuilderX 可视化界面 2.通过 vue-cli 命令执行 总结 1.通过 HBuilderX 可视化界面 a. 创建uni-app: b. 运行uni-app; c. 发布uni-app 2.通过 vue-cli 命令执行 a. 安装node.js,下载地址:https://nodejs.org/en/download/ ##检查node.js 版本 node -v v14.18.1 npm -v b. 全局安装 vue-cli npm install -g @vue/
-
浅谈VUE uni-app 常用API
目录 一.路由与页面跳转 二.界面 总结 一.路由与页面跳转 uni.navigateTo(OBJECT) 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面.uni.redirectTo(OBJECT) 关闭当前页面,跳转到应用内的某个页面.uni.reLaunch(OBJECT) 关闭所有页面,打开到应用内的某个页面.uni.switchTab(OBJECT) 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面.uni.navigateB
-
浅谈VUE uni-app 核心知识
目录 规范 a. 页面文件遵循vue单文件组件规范 b. 组件标签靠近小程序规范 c. 接口能力(JS API)靠近微信小程序规范 e. 数据绑定及事件处理使用Vue.js 规范 特色 a. 条件编译 b. App端的Nvue开发 c. HTML5+ 总结 规范 a. 页面文件遵循vue单文件组件规范 <!-- 模板块 --> <template> <view class="main"> {{msg}} </view> </temp
-
浅谈VUE uni-app 自定义组件
1.父组件向子组件传递数据可以通过 props 2.子组件向父组件传递数据可以通过自定义事件,父组件自定义事件,子组件触发父组件的事件,并传传递数据 3.子组件可以定义插槽slot,让父组件自定义要显示的内容 4.使用easycom规范,可以真接使用组件 page/news/news.vue <template> <view> <veiw>自定义组件使用规范</veiw> <card color="red" @fclick=&quo
-
浅谈VUE uni-app 基础组件
1 .scroll-view 使用竖向滚动时,需要给 一个固定高度,通过 css 设置 height:使用横向滚动时,需要给添加white-space: nowrap;样式. scroll-y:允许纵向滚动,scroll-x:允许横向滚动 @scroll: 滚动时触发,event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 数据双向绑定 <template> <view> &
-
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
1.打包项目 期间遇到的坑,提前说下,避免重复工作. 1.1打包的app出现白屏. 出现原因:路径不对,需要改config\index.js 解决办法:修改打包的路径. 1.2点击页面跳转不了,报 Loading chunk 2 failed. 等错误. 出现原因:不能用history配置路由,要用hash 解决办法:修改路由mode属性为hash. 1.3.点手机物理按钮,直接退出程序. 出现原因:无理返回键直接用监听不到路由,会直接退出程序. 解决办法:可以引入mui,就能正常使用了. 1.
-
浅谈Vue.js
vue.js的总体评价"简单却不失优雅,小巧而不乏大匠" Vue.js简介 Vue.js的作者为Evan You(尤雨溪),任职于Google Creative Lab,虽然Vue是一个个人项目,但在发展前景上个人认为绝不输于Google的AngularJs,下面我会将Vue与Angular(Angular 1.0+版本)做一些简单的比较. Vue的主要特点就和它官网(http://cn.vuejs.org/)所介绍的那样: (1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (
-
浅谈Vue开发人员的7个最好的VSCode扩展
在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松. 它们可以帮助格式化.可伸缩性.强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务.它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容易编写. 作为一个Vue爱好者,我花了很多时间为Vue开发人员寻找最好的VS Code扩展.这里有一些让我的生活变得如此简单的方法. 准备好了吗? 让我们直接切入正题. Vetur 如果你从这篇文章中下载了一个VS Code扩展,它一定是Vetur. 一个针
-
浅谈Vue插槽实现原理
目录 一.样例代码 二.透过现象看本质 三.实现原理 四.父组件编译阶段 五.父组件生成渲染方法 六.父组件生成VNode 七.子组件状态初始化 八.子组件编译阶段 九.子组件生成渲染方法 十.使用技巧 10.1.具名插槽 10.2.作用域插槽 一.样例代码 <!-- 子组件comA --> <template> <div class='demo'> <slot><slot> <slot name='test'></slot&g
-
浅谈vue实现双向事件绑定v-model的原理
目录 解释: 总结 补充 与js或者jquery直接改变操作dom不同,vue使用v-model实现数据的双向绑定,它会根据控件类型自动选取正确的方法来更新元素. v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值 官方文档这么解释: v-model只不过是一个语法糖而已,真正的实现靠的还是 v-bind:绑定响应式数据 触发 input 事件 并传递数据 (核心和重点) 如下代码 <input
-
浅谈vue首次渲染全过程
目录 1.vue初始化 vue入口文件 完整版和运行时版本的区别 1.1.src/core/instace/index.js 1.2.src/core/index.js 1.3.src/platforms/web/runtime/index.js 1.4.src/platforms/web/entry-runtime-with-compiler.js 1.5.vue初始化总结 2.vue构造函数执行 2.1.beforeCreate钩子 2.2.created钩子 2.3.$mount函数 2.
-
浅谈Vue单页面做SEO的四种方案
目录 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 优势: 不足:(开发中遇到的坑) 2.Nuxt 静态应用部署 优势: 不足: 3.预渲染prerender-spa-plugin 优势: 不足: 4.Phantomjs 针对爬虫做处理 优势: 不足: 总结 众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,通过查找资料,大概有以下4种方法.(本人只用过第一,第三种方案) 1.Nuxt 服务端渲染应用部署 (SSR服务器渲染) 关于服务器渲染:Vue官网介绍 ,
-
浅谈Vue的双向绑定和单向数据流冲突吗
目录 前言 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 总结 参考资料 前言 众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定.那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗? 本文主要包括以下内容 单向绑定 vs 双向绑定 单向数据流 vs 双向数据流 为什么说v-model只是语法糖 单向绑定
-
浅谈Vue父子组件和非父子组件传值问题
本文介绍了浅谈Vue父子组件和非父子组件传值问题,分享给大家,具体如下: 1.如何创建组件 1.新建一个组件,如:在goods文件夹下新建goodsList.vue <template> <div class='tmpl'> goodsList组件 </div> </template> <style> </style> <script> export default { data() { return{} }, creat
-
浅谈Vue.js 1.x 和 2.x 实例的生命周期
在Vue.js中,在实例化Vue之前,它们都是以HTML的文本形式存在文本编辑器中.当实例化后将经历创建.编译.销毁三个主要阶段. 以下是Vue.js 1.x 实例的生命周期图示: Vue.js 1.x 的生命周期钩子 1. init 在实例开始初始化时同步调用.此时数据观测.事件和Watcher都尚未初始化. 2. created 在实例化创建之后同步调用.此时实例已经结束解析选项,已建立:数据绑定.计算属性.方法.Watcher/事件回调,但是还没有开始DOM编译,$el还不存在. 3. b
随机推荐
- iOS中获取系统相册中的图片实例
- 如何屏蔽防止别的网站嵌入框架代码
- 用vbscript防止本地用户更改其密码
- Ruby常量查找路径问题深入研究
- JS前端开发判断是否是手机端并跳转操作(小结)
- Vue.js 递归组件实现树形菜单(实例分享)
- asp.net JavaScript插件 JavaScript Function Outliner
- aspx不显示ViewState的实例
- PHP统计目录中文件以及目录中目录大小的方法
- LINUX下PHP程序实现WORD文件转化为PDF文件的方法
- Python+django实现简单的文件上传
- javascript结合Flexbox简单实现滑动拼图游戏
- SQL Server误区30日谈 第20天 破坏日志备份链之后,需要一个完整备份来重新开始日志链
- Java 其中翻转字符串的实现方法
- java编写的文件管理器代码分享
- div浮层,滚动条移动,位置保持不变的4种方法汇总
- 用CSS实现图片倾斜 只支持IE
- Linux系统下快速配置HugePages的完整步骤
- C++利用 _findfirst与_findnext查找文件的方法
- Python从文件中读取指定的行以及在文件指定位置写入