vue-devtools安装

  • git clone https://github.com/vuejs/vue-devtools.git

  • npm install

  • npm run build

  • 游览器输入地址“chrome://extensions/”进入扩展程序页面，点击“加载已解压的扩展程序…”按钮，选择vue-devtools>shells下的chrome文件夹。

如果看不见“加载已解压的扩展程序…”按钮，则需要勾选“开发者模式”。

  • 添加成功后，浏览器调试工具，会增加Vue调试选项。

项目创建

  • node -v

  • npm -v
    查看node.js 是否安装

  • npm install -g vue-cli

  • npm install -g webpack

  • vue init webpack myVue （myVue 项目名称）
    Use ESLint to lint your code? (Y/n)：是否使用EsLint编码，选择N，其他默认

  • npm install （未自动安装依赖，进入项目目录，手动安装依赖项）

  • npm run dev （启动项目）

本地引用

vue 语法

插值绑定

{{num}}
注意点：  html代码（表达式） 和 html代码（变量），前者优先解释Dom节点，插值语法无效，‘{{’，‘}}’被当作节点文本内容解析。

Html 插值

1
<div v-html="DOM"></div>

属性绑定 （v-bind：/：）

1
2
<div v-bind:class="className" v-bind:title="title"></div>
<input v-bind:type="'text'" v-bind:placeholder="true?'请输入':'请录入'"/>

类名绑定 （：class）

1
2
3
<div :class="'color-gray size-18 style-italic'">字符串拼接</div>
<div :class="['color-gray','size-18','style-italic']">数组</div>
<div :class="{'color-gray':true, 'size-18':true, 'style-italic':true}">对象</div>

样式绑定 （：style）

1
2
<div :style="'color:gray; font-size:18px; font-style:italic;'">字符串拼接</div>
<div :style="{'color':'gray', 'font-size':'18px', 'font-style':'italic'}">对象</div>

事件绑定 （v-on：/@）

1
2
<div v-on:click="function()"></div>
<div @click="function()"></div>
+ 常用事件修饰符
.stop | .prevent | .capture | .self | .once | .passive
.delete/.8/.46 | .tab/.9 | .enter/.13 | .esc/.27 | .space/.32 
.left/.37 | .up/.38 | .right/.39 | .down/.40 
.ctrl | .alt | .shift | .meta

双向绑定 （v-model）

1
2
<div v-bind:class="className" v-bind:title="c_title">{{name}}</div>
<input v-bind:type="'text'" v-bind:placeholder="true?'请输入':'请录入'" v-model='name'/>

条件渲染 （v-if/v-else-if/v-else）

1
2
3
<p v-if="order === 0">v-if</p>
<p v-else-if="order === 1">v-else-if</p>
<p v-else>v-else</p>

切换元素的CSS属性：display （v-show）

1
2
<p v-show="visible">v-show，visible = true</p>
<p v-show="!visible">v-show，visible = false</p>

列表渲染，可以渲染数组、对象 （v-for）

1
2
3
4
5
6
7
8
9
10
11
<ul>
    <li v-for="(item, index) in users">{{index}} &nbsp; {{item.name}}</li>
</ul>
<ul>
    <li v-for="(user, index) in users">
	    用户 {{index + 1}}
	    <ul>
	        <li v-for="(val, key) in user">{{key}} —— {{val}}</li>
	    </ul>
	</li>
</ul>