利用vue-cli创建新项目
1、在vue的实例化对象中对vue的data进行操作，建议用vm.$data进行操作， vm.$watch('字段', function(newValue, oldValue){})可以对字段进行监听，但是注意，该方法对路径引用的数组或对象来说，newValue与oldValue两个值是一样的，注意：在$watch里的函数尽可能不要用箭头函数，因为这样容易获取不到上下文
let app = new Vue({
el: '#container',
data: {
name: 'are you ok???',
list: ['AAA', 'BBB', 'CCC']
}
});
app.$watch('list', function() {
console.log(arguments);
});
//输出两个 ['AAA', 'BBB', 'CCC','ddd']
app.$data.list.push('ddd');
app.$watch('name', function() {
console.log(arguments);
});
//输出 'haha', 'are you ok???'
app.$data.name='haha';
2、vue的生命周期函数
let app = new Vue({
el: '#container',
data: {
name: 'this is title',
list: ['aaa', 'bbb']
},
beforeCreate() {
console.log(this, 'beforeCreate');
},
created() {
console.log(this, 'created')
},
beforeMount() {
console.log(this, 'beforeMount');
},
mounted() {
console.log(this, 'mounted');
},
beforeUpdate() {
console.log(this, 'beforeUpdate');
},
updated() {
console.log(this, 'updated');
},
beforeDestroy() {
console.log(this, 'beforeDestroy');
},
destroyed() {
console.log(this, 'destroyed');
}
});
setTimeout(() => {
app.$data.name='check title';
}, 2000);
setTimeout(() => {
app.$destroy();
}, 5000);
3、vue的三种插值方法
<body>
<div id="container">
<h1>{{name}}</h1>
<h2>{{age >= 30? '年龄大于等于30': '小于30岁'}}</h2>
<h3>{{msg.split('').reverse().join('')}}</h3>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
name: 'title',
age: 30,
msg: 'good'
}
});
</script>
</body>
注意：这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，比如定义变量，用if语句等，是不生效的。
4、vue指令
v-once: 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过
v-pre: 跳过这个元素和它的子元素的编译过程
<body>
<div id="container">
<h3 v-once>{{msg}}}</h3>
<h3 v-pre>{{msg}}</h3>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
msg: '<b style="color: red">this is test</b>'
}
});
</script>
v-text：更新元素的 textContent。如果要更新部分的 textContent ，相当于 {{ Mustache }} 插值。
v-html：更新元素的 innerHTML 。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译 。如果试图使用 v-html 组合模板，需考虑是否通过使用组件来替代。
<body>
<div id="container">
<h3 v-text="msg"></h3>
<h3 v-html="msg"></h3>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
msg: '<b style="color: red">this is test</b>'
}
});
</script>
</body>
输出内容：
v-model：与表单指定的字段进行双向绑定，并且值随着字段的变化而变化
- .lazy - 取代
input监听change事件 - .number - 输入字符串转为有效的数字
- .trim - 输入首尾空格过滤
<body>
<div id="container">
<input type="text" v-model.trim="msg"> <!--添加trim后，可以删除两边的空格-->
<input type="text" v-model.number="msg"> <!--在data中把msg转成number类型的数据-->
<input type="text" v-model.lazy="msg"> <!--添加lazy后的这个属性，相当于是change事件-->
<h3>{{msg}}</h3>
<input type="button" value="点击" @click="getVal">
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
msg: ''
},
methods: {
getVal() {
console.log(`(${this.$data.msg})`);
console.log(typeof this.$data.msg);
}
}
});
</script>
</body>
与表单组件的绑定，参看vue官方文档
v-show: 根据表达式之真假值，切换元素的 display CSS 属性 即为false时，display: none;
v-if: 当所绑定的值为true时会被渲染，否则会被销毁，不出现在元素中（注意v-for 与v-if不同时使用，因为v-for的优先级比v-if高，会导致各种嵌套）一般配合v-else， v-else-if 配合使用
<body>
<div id="container">
<h3 v-show="show">{{msg}}</h3> <!--如果是false的时候，那么会在对应的dom元素上添加style="display: none;"-->
<h4 v-if="ifShow > 5">{{msg}}</h4> <!--如果是false的时候，那么在dom元素上就不会渲染这个元素，即不存在-->
<h4 v-else-if="ifShow == 5">{{msg}}--haha</h4>
<h4 v-else>{{msg}}--this is true</h4>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
msg: 'this is message',
show: false,
ifShow: 3
}
});
</script>
</body>
v-for: 参数可以是Array | Object | number | string 实现循环渲染
<body>
<div id="container">
<ul><li v-for="(v,k) of msg">{{v}}----{{k}}</li></ul>
<ul><li v-for="(v,k) in msg">{{v}}----{{k}}</li></ul>
</div>
<script src="./vue.js"></script>
<script>
let app = new Vue({
el: '#container',
data: {
msg: 'good',
}
});
</script>
</body>
v-on: 绑定事件
.stop- 调用event.stopPropagation()。.prevent- 调用event.preventDefault()。.capture- 添加事件侦听器时使用 capture 模式。.self- 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAlias}- 只当事件是从特定键触发时才触发回调。.native- 监听组件根元素的原生事件。.once- 只触发一次回调。.left- (2.2.0) 只当点击鼠标左键时触发。.right- (2.2.0) 只当点击鼠标右键时触发。.middle- (2.2.0) 只当点击鼠标中键时触发。.passive- (2.3.0) 以{ passive: true }模式添加侦听器
具体参看vue官方文档
<!-- 方法处理器 -->
<button v-on:click="doThis"></button> <!-- 动态事件 (2.6.0+) -->
<button v-on:[event]="doThis"></button> <!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button> <!-- 缩写 -->
<button @click="doThis"></button> <!-- 动态事件缩写 (2.6.0+) 相当于会把event转化成data里对应的event字段-->
<button @[event]="doThis"></button> <!-- 停止冒泡 -->
<button @click.stop="doThis"></button> <!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button> <!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form> <!-- 串联修饰符 -->
<button @click.stop.prevent="doThis"></button> <!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter"> <!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter"> <!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis"></button> <!-- 对象语法 (2.4.0+) -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>
v-bind: 绑定属性
<!-- 绑定一个属性 -->
<img v-bind:src="data:imageSrc"> <!-- 动态特性名 (2.6.0+) -->
<button v-bind:[key]="value"></button> <!-- 缩写 -->
<img :src="data:imageSrc"> <!-- 动态特性名缩写 (2.6.0+) -->
<button :[key]="value"></button> <!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName"> <!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div> <!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div> <!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div> <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
<my-component :prop="someThing"></my-component> <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
<child-component v-bind="$props"></child-component> <!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>
v-cloak: 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none }一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
利用vue-cli创建新项目的更多相关文章
- vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
- vue cli创建的项目 当你后期使用了ES6语法，如何解决浏览器兼容问题
最近开发了一个项目,开发过程中,由于需要使用了async await ,于是发现,只有少数的浏览器支持,极大多数的浏览器是不支持这玩意的,在网上各种找解决方案,基本都是失败,最后总结了两个方案之后,尝 ...
- Angular2 使用CLI创建新项目
1.安装node.js: 2. npm install -g @angular/cli 3.ng new projectName 4.ng serve PS:如果要使用moduleId,需先在src目 ...
- 用vue ui创建的项目怎么关闭eslint校验
在Vue Cli的控制面板找到配置-ESLint configuration,然后关闭保存时检查就可以了
- 解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用 工作中常见问题汇总及解决方案 npm install chrome ...
- 用Angule Cli创建Angular项目
Angular4.0来了,更小,更快,改动少 接下来为Angular4.0准备环境和学会使用Angular cli项目 1.环境准备: 1)在开始工作之前我们必须设置好开发环境 如果你的机器上还没有安 ...
- 用Kotlin开发Android应用（II）：创建新项目
这是关于Kotlin的第二篇.各位高手发现问题,请继续“拍砖”. 原文标题:Kotlin for Android(II): Create a new project 原文链接:http://anton ...
- cocos2d-x3.2创建新项目失败的一种可能性（cygwin自带的python2.6被抢先执行）
之前一直使用cocos2d-x2.2写游戏,写了几个游戏后,想尝试下3.x版本的新功能,就下载了cocos2d-x3.2版本. 参照官方文档的说法,cocos2d-x3.x版本需要python2.7环 ...
- AndroidStudio创建新项目报错
创建新项目自动执行时报错: Failed to import new Gradle project: failed to find Build Tools revision 17.0.0 Consul ...
- cocos2dx 3.3创建新项目 和 VS2012解决方案加载失败问题
首先创建新项目,步骤如下: 1.进入cocos2d-x-3.3\tools\cocos2d-console\bin目录,按住shift+鼠标右键 2.输入 cocos new 项目名 –p 包名 – ...
随机推荐
- 假设result是一个float型变量，其值为27.32，value是一个int型变量，其值为15执行以下语句后，两个便利的值分别是多少？为什么？
假设result是一个float型变量,其值为27.32,value是一个int型变量,其值为15执行以下语句后,两个便利的值分别是多少?为什么? 在执行这条语句的过程中,保存在result中的值被读 ...
- logistic回归为什么要使用sigmoid函数
https://www.baidu.com/link?url=LnDjrhLG7Fx6YVgR9WljUILkPZrIzOR402wr2goIS-ARtDv9TwZ2VYVbY74fyVpQlE22n ...
- 音乐app各部分笔记（二）
7-15播放器progress-circle圆形进度条组件实现 1.首先是引入三步 progress-circle 引入到player.vue中 然后就是 SVG技术 值得注意的事 svg 中 ...
- Win10提示无法创建新的分区也找不到现有的分区解法
原文链接:https://www.pconline.com.cn/win10/1126/11261093.html 1.格式化整个硬盘,重新分区 如果你的硬盘上没有重要数据的话,到了分区这一步时,将硬 ...
- java知识点4
架构篇 分布式 数据一致性.服务治理.服务降级 分布式事务 2PC.3PC.CAP.BASE. 可靠消息最终一致性.最大努力通知.TCC Dubbo 服务注册.服务发现,服务治理 分布式数据库 怎样打 ...
- QR二维码原理（一）
一.什么是QR码 QR码属于矩阵式二维码中的一个种类,由DENSO(日本电装)公司开发,由JIS和ISO将其标准化.QR码的样子其实在很多场合已经能够被看到了,我这还是贴个图展示一下: 这个图如果被正 ...
- SpringCloud Config（分布式配置中心）
⒈是什么? Spring Cloud Config分为服务端和客户端两部分. 服务端也称为分布式配置中心,它是一个独立的微服务应用,用来连接配置服务器并为客户端提供获取配置信息,加密/解密信心等接口. ...
- dubbo源码分析10——服务暴露1_export()方法分析
ServiceConfig类中的export()方法,是dubbo服务暴露的入口方法,被触发的时机有两个: 1. spring容器初始化完成所有的bean实例后,通过事件机制触发 2. 实现Initi ...
- MySQL之路 ——1、安装跳坑
最近几天准备写一个JavaWeb的简单登录,注册试下手:所谓”工欲善其事必先利其器“,然后数据库方面的话,考虑用MySQL.在安装MySQL过程中,碰到了一些问题(大同小异),记录在此,诸君共勉. 1 ...
- Net开发的部分知名网站案例
.Net开发的部分知名网站案例:http://www.godaddy.com 全球最大域名注册商http://www.ips.com 环迅支付,国内最早的在线支付平台http://www.icbc.c ...