利用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 包名 – ...
随机推荐
- WSGI、uwsgi和uWSGI
一.WSGI WSGI ( Web Server Gateway Interface )是一个网络服务器和网络应用的通用接口的规范或者用于Python框架. 由于python开发人员在网络框架的选择限 ...
- UVA315 Network 连通图割点
题目大意:有向图求割点 题目思路: 一个点u为割点时当且仅当满足两个两个条件之一: 1.该点为根节点且至少有两个子节点 2.u不为树根,且满足存在(u,v)为树枝边(或称 父子边,即u为v在搜索树中的 ...
- CentOS7 设置主机名及IP映射
1.设置主机名 查看本机的主机名,使用如下三个命令中任意一个即可 # hostname # uname -n # cat /proc/sys/kernel/hostname 使用 vi 编辑器打开 / ...
- Network Architecture Search Survey
- 拦截RESTful API并做相应处理的方式
⒈使用Filter(过滤器) package cn.coreqi.security.filter; import org.springframework.stereotype.Component; i ...
- python 各种推导式玩法
推导式套路 除了最简单的列表推导式和生成器表达式,其实还有字典推导式.集合推导式等等. 下面是一个以列表推导式为例的推导式详细格式,同样适用于其他推导式. variable = [out_exp_re ...
- 高效获得Linux函数调用栈/backtrace的方法【转】
转自:https://blog.csdn.net/littlefang/article/details/42295803 有四种方法可以获得Linux的函数调用堆栈,参见CALL STACK TRAC ...
- requests库入门09-OAUTH认证
实际登陆中,认证用到的token会变的,不过可以在GIthub设置一个私人token. 如图,登录GIthub,然后用户下面选择Settings/Developer settings/Personal ...
- C#编写COM组件
1.新建一个类库项目 2.将Class1.cs改为我们想要的名字 问是否同时给类改名,确定 3.修改Properties目录下面的AssemblyInfo.cs ComVisible属性设置为True ...
- 028_shell脚本递归求值
一. #!/bin/sh factorial() { if [ "$1" -gt "1" ]; then i=`expr $1 - 1` j=`factoria ...