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:只在第一次渲染时渲染