Vue使用小结
公司新项目使用Asp.Net Core+Vue组合来做,这里总结下对于Vue的认识
为什么选择Vue
主要基于以下几点选择Vue而不是jQuery、React等框架
- 双向绑定
相比于jQuery减少了许多DOM操作 - 文档
相比于React和Angular,Vue的文档简单易读 - 上手快
- 轻量级
Debug
Chrome借助于Vue Devtools插件可以方便的查看Vue对象:
Vue实例
基本使用
页面中至少有一个Vue实例
var vm = new Vue({
el: '#app',
data: {
tag: "",
codes: []
},
mounted: function () {
this.init();
},
methods: {
init() {
this.getCodes();
},
getCodes() {
if (this.tag === "") {
// ...
}
}
}
});
页面中使用Vue实例:
<div id="app" v-cloak>
<input type="text" v-model="tag">
<ul>
<li v-for="item in codes">item</li>
</ul>
<button v-on:click="getCodes()">刷新</button>
</div>
只有当Vue实例被创建时data
中存在的属性才是响应式的,当这些数据改变时,视图会进行重渲染;视图接收用户输入时,data
中相应的属性值也会发生改变。
如果你在Vue实例创建完毕后,添加一个新的属性,比如:
vm.attr="vue";
那么对attr
的改动将不会触发任何视图的更新。如果你需要在晚些时候操作一个属性,那么可以在创建Vue实例时对该属性赋予一个初始值。
计算属性与侦听器
项目中只用到了计算属性,未用到侦听器
组件
单文件组件相对复杂,且整个项目中只有极少处需要使用组件,所以这里使用了全局组件。
模板语法
内容可参考官方文档:模板语法。
项目中主要用到以下指令
- v-if...v-else
条件渲染
v-bind
Class 与 Style 绑定v-for
列表渲染v-model
表单输入绑定v-on
事件处理
遇到的问题
- v-for 和 v-on:click 一起使用 v-on:click无效,也不报错
网上多数是在Vue组件中出现这种情况,使用v-on:click.native
来替代v-on:click
,我这里不是,示例代码如下:
<ul>
<li v-for="item of products" v-on:click="redirectToDetail(item.id)">{{item.name}}</li>
</ul>
后来发现因为样式问题,页面上鼠标点击时并未点击到li
标签,因而未触发redirectToDetail
方法。
小结
这是第一次在项目中使用Vue。目前,仅仅体会了Vue的便利之处,对于背后的原理尚不清楚,这也是以后需要多研究的地方。
以上内容,不足之处希望各位网友多多指教。
Vue使用小结的更多相关文章
- vue开发小结(下)
前言 继前几天总结了vue开发小结(上)后,发现还有很多的点没有能列举出来,于是还是打算新建一个下篇,再补充一些vue开发中需要注意的细节,确实还是都是细节的问题,我只是在这里强调下,希望对大家有帮助 ...
- Vue学习小结(二)
接上一批,小结(二). 三.导航内容(含左侧导航及顶部面包屑导航) 其实导航条主要根据element-ui的教程进行编写,官网:http://element-ui.cn/#/zh-CN/compone ...
- Vue学习小结(一)安装依赖与数据来源
不多说啥了,生活中都是各种阵痛与惊喜.最近在学习vue框架,刚写完一个小型的后台管理系统(https://github.com/michaelzhengzm/info-manager-systerm_ ...
- vue 使用小结 2019.03
v-bind 中使用函数 :attr = 'num' 如上面的例子,通常 num 是 vue 实例中 data 的值,或者是 computed 对象中的值,我们可以在具体函数中计算,改变相应的变量,以 ...
- Vue技巧小结(持续更新)
1. 动态生成的input自动focus 背景: input元素在需要时才插入DOM,这时元素用autofocus属性第一次是可以获取焦点,但是如果有第二个,就不再生效,所以得另外的办法. 方法: / ...
- vue开发小结(上)
前言: 18年年底,就一个字,忙,貌似一到年底哪个公司都在冲业绩,包括我们自己开发自己公司的项目也一样得加把劲.自从18年年初立了个flag17年年终总结——走过2017,迎来2018Flag到现在又 ...
- Vue学习小结
ES6 let完全可以取代var const声明一个只读的常量 箭头函数:可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind) 函数绑定(function bi ...
- vue知识点小结
vue.js中==和===的区别 1.== 用于比较.判断两者相等,比较时可自动换数据类型 2.=== 用于(严格)比较.判断两者(严格)相等,不会进行自动转换,要求进行比较的操作数必须类型一致,不一 ...
- vue小组件练习之文字居中对齐组件
时隔多月,继续学习Vue,这次是一个组件的制作过程 先让我们来看一下组件的预期效果 上图为公司自营的一个微信商城的某一部分截图,可以看到红框内部分的文字多行与单行是居中对齐的,我们现在要做的就是使用V ...
随机推荐
- DOS命令行操作MySQL常用命令
平时用可视化界面用惯了,如果紧急排查问题,没有安装可视化工具的话,只能通过命令来看了. 以备不时之需,我们要熟悉一下命令行操作MySQL. 打开DOS命令窗口:WIN + R 输入cmd,回车 然后输 ...
- C++ getline函数用法详解
转载自http://c.biancheng.net/view/1345.html 虽然可以使用 cin 和 >> 运算符来输入字符串,但它可能会导致一些需要注意的问题. 当 cin 读取数 ...
- Redis for OPS 04:主从复制
写在前面的话 Redis 的主从其实和 MySQL 类似,更多的还是作为备份的功能存在,在复杂的 Rediis 集群架构中,主从也是不可或缺的. 主从复制 主从复制原理: 1. 从库通过命令连接到主库 ...
- PHP-Curl模拟HTTPS请求
使用PHP-Curl方式模拟HTTPS请求,测试接口传参和返回值状态 上代码!! <?php /** * 模拟post进行url请求 * @param string $url * @par ...
- Linux域名服务DNS
什么是 DNS DNS 全称是 Domain Name System,大意是域名解析系统,它的职责是把域名翻译成一个一个可以识别的 IP 供不同的计算机设备连接. linux 有关 DNS 解析的配置 ...
- Taro多端自定义导航栏Navbar+Tabbar实例
运用Taro实现多端导航栏/tabbar实例 (H5 + 小程序 + React Native) 最近一直在捣鼓taro开发,虽说官网介绍支持编译到多端,但是网上大多数实例都是H5.小程序,很少有支持 ...
- flex弹性布局没有生效
display: -webkit-flex; /* 新版本语法: Chrome 21+ */ display: -webkit-box; /* 老版本语法: Safari, iOS, Android ...
- WebLogic任意文件上传漏洞复现与分析 -【CVE-2018-2894 】
CVE-2018-2894 漏洞影响版本:10.3.6.0, 12.1.3.0, 12.2.1.2, 12.2.1.3 下载地址:http://download.oracle.com/otn/nt/m ...
- 常见的Web源码泄露总结
常见的Web源码泄露总结 源码泄露方式分类 .hg源码泄露 漏洞成因: hg init 的时候会生成 .hg 漏洞利用: 工具: dvcs-ripper .git源码泄露 漏洞成因: 在运行git i ...
- 重新认识快速视图窗体(Quick View Form)
关注本人微信和易信公众号: 微软动态CRM专家罗勇 ,回复158或者20151009可方便获取本文,同时可以在第一时间得到我发布的最新的博文信息,follow me! 在我的 微软Dynamics C ...