vue2.0学习笔记 -- 常用指令

一，（windows，node）淘宝镜像配置

1，创建文件夹：E:\nodejs\node_global
2，设置nodejs全局目录，在cmd中输入npm config set cache "E:\nodejs\node_cache"npm config set prefix "E:\nodejs\node_global"
3，用户变量 path 中把 C:\Users\Administrator\AppData\Roaming\npm;改为E:\nodejs\node_global在系统变量中 新增变量NODE_PATH：E:\nodejs\node_global\node_modules系统变量中 path:E:\nodejs\node_global\node_modules;
4，在cmd中输入：npm install -g cnpm --registry=https://registry.npm.taobao.org

二，vscode 常用插件

1，Auto Close Tag (自动闭合HTML/XML标签)
2，Auto Rename Tag (自动完成另一侧标签的同步修改)
3，Beautify (格式化 html ,js,css)
4，Bracket Pair Colorizer(给括号加上不同的颜色，便于区分不同的区块)
5，Debugger for Chrome(映射vscode上的断点到chrome上，方便调试)
6，ESLint(js语法纠错，可以自定义配置)
7，HTML Snippets(智能提示HTML标签，以及标签含义)
8，JavaScript(ES6) code snippets(ES6语法智能提示，以及快速输入）
9，Class autocomplete for HTML(智能提示HTML class =“”属性)
10，npm Intellisense(require 时的包提示)

三，vscode常用快捷键

CTRL+enter ：向下插入
CTRL+shift+enter：向上插入
CTRL+/：切换注释

四，vue 常用命令
v-if，v-on，

<div id="app"><p v-if="isShow">{{show}}</p><p v-else="isShow">{{hide}}</p><button v-on:click="change">显示/隐藏</button>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{show: '显示',hide: '隐藏',isShow: true},methods : {change:function(){this.isShow=!this.isShow;}}});
</script>

v-for

<div id="app"><ul><li v-for="student in students">{{student.name}}</li></ul>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{students : [{name:"张三"},{name:"李四"}]}});
</script>

v-model (input)

<div id="app"><input type="text" v-model="test"><p>{{test}}</p>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{test: 11,}});
</script>

v-model 双向绑定(下拉框)

<div id="app"><select v-model="selected"><option value="0">全选</option><option value="1">成功</option><option value="2">失败</option></select><p>{{selected}}</p>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{selected: 0,}});
</script>

v-model (单选)

<div id="app"><input type="radio" id="man" value="man" v-model="selected"/> <label for="man">男</label><input type="radio" id="woman" value="woman" v-model="selected"/><label for="woman">女</label><p>{{selected}}</p>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{selected: 'woman',}});
</script>

v-model (多选框）

<div id="app"><input type="checkbox" id="football" value="football" v-model="selected"/> <label for="football">足球</label><input type="checkbox" id="basketball" value="basketball" v-model="selected"/> <label for="basketball">篮球</label><input type="checkbox" id="volleyball" value="volleyball" v-model="selected"/> <label for="volleyball">排球</label><p>{{selected}}</p>
</div>
<script type="text/javascript">var app = new Vue({el:'#app',data:{selected: ['basketball'],}});
</script>

v-text 不会解析标签，
v-html 会解析标签
v-bind 多用于绑定属性

<img v-bind:src="url" />

v-cloak:数据加载完后渲染，在简单项目中使用可以解决屏幕闪动。
v-once:只在第一次渲染时渲染

vue2.0学习笔记 -- 常用指令相关推荐

Vue2.0学习笔记二基础语法
1. Mustache语法 Mustache语法也叫插值表达式,Mustache语法式通过{{}}渲染到页面,并且数据是响应式的. 数据的响应式:数据的变化导致页面的内容随之变化效果图: 2. 指令 ...
Vue2.0学习笔记一：各种表达式
#,过滤器 #,在Vue2.x中,过滤器只能在mustache绑定中使用,为了在指令帮定中实现同样的行为,你应该使用计算属性: #,过滤器可以串联 {{ message | filterA | ...
Vue2.0学习笔记：Vue事件修饰符的使用
事件处理如果需要在内联语句处理器中访问原生DOM事件.可以使用特殊变量$event,把它传入到methods中的方法中. 在Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间 ...
mysql5.0镜像_Mysql5.0学习笔记（一）
Mysql5.0学习笔记(一) -基本sql语句与支持字符集 1.登录 mysql -h localhost -u root 2.创建用户firstdb(密码firstdb)和数据库,并赋予权限于fi ...
Python学习笔记:常用内建模块7XML
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
Python学习笔记:常用内建模块2：collections
前言最近在学习深度学习,已经跑出了几个模型,但Pyhton的基础不够扎实,因此,开始补习Python了,大家都推荐廖雪峰的课程,因此,开始了学习,但光学有没有用,还要和大家讨论一下,因此,写下这些帖 ...
Zabbx6.0(学习笔记)
Zabbx6.0(学习笔记) 目录导航 Zabbx6.0(学习笔记) 一.为什么需要监控系统二.如何选择监控三.Zabbix概述四.Zabbix安装哪个版本? Zabbix安装要求 1.硬件 ...
Tensorflow2.0学习笔记（一）
Tensorflow2.0学习笔记(一)--MNIST入门文章目录 Tensorflow2.0学习笔记(一)--MNIST入门前言一.MNIST是什么? 二.实现步骤及代码 1.引入库 2.下载 ...
Tensorflow2.0学习笔记（二）
Tensorflow2.0学习笔记(二)--Keras练习文章目录 Tensorflow2.0学习笔记(二)--Keras练习前言二.使用步骤 1.实现步骤及代码 2.下载 Fashion MN ...

vue2.0学习笔记 -- 常用指令

vue2.0学习笔记 -- 常用指令相关推荐

最新文章

热门文章