vue-cli
卸载 Vue2.0
npm uninstall -g vue-cli 装置 vue-cli
查看版本
创立我的项目
创立我的项目的配置
通过高低箭头可设置选项，按回车键确定
运行我的项目
留神
- local: 集体创立的 Vue 我的项目
- Network: 团队创立的 Vue 我的项目
Vue 目录剖析
目录
目录解析
数据绑定
数据绑定的常见形式便是 {{}}，也被称为插值表达式
数据绑定的形式
- v-text：相比插值表达式更加简洁，且没有闪动问题
- v-html: 填充 HTML 片段，具备跨站脚本攻打
- v-pre: 跳过编译过程，显示原始信息
<template>
<!-- vue 模板内容中 所有的内容都是要被一个根节点包裹 -->
<div id="app">
<div>{{name}}</div>
<div v-text="html"></div>
<div v-html='html'></div>
<div v-pre>{{msg}}</div>
</div>
</template>
<script>
export default {
name: '#app',
// data: 业务逻辑外面定义的数据
data() {
return {
name: '尧子陌',
text: 'v-text',
html: '<h1>v-html</h1>',
}
}
}
</script>
<style>
</style>
Vue 中的循环
v-for
v-for 指令须要以 site in sites 模式的非凡语法，sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 能够绑定数据到数组来渲染一个列表：
<template>
<!-- vue 模板内容中 所有的内容都是要被一个根节点包裹 -->
<div id="app">
<ul>
<li v-bind:key='item.id' v-for='(item) in list'>{{item}}</li>
<li v-bind:key="item.id" v-for="(item,index) in list2">
{{item.title}}
{{index}}
</li>
<li v-bind:key='item.id' v-for="(item,index) in list3">
{{item.catch +'----'+ index}}
<ol>
<li v-bind:key="fruit" v-for="fruit in item.list4">
{{fruit.title}}
</li>
</ol>
</li>
</ul>
</div>
</template>
<script>
export default {
name: '#app',
// data: 业务逻辑外面定义的数据
data() {
return {list: ['apple', 'banner', 'cat', 'pear'],
list2: [{'title': 'apple'}, {'title': 'apple'}, {'title': 'apple'}],
list3: [{
'catch': '国内新闻',
list4: [{'title': 'apple'}, {'title': 'apple'}, {'title': 'apple'}]
}]
}
}
}
</script>
<style>
</style>
Vue 属性绑定
v-bind: 绑定属性 可省略为：动静地绑定一个或多个 attribute
<template>
<!-- vue 模板内容中 所有的内容都是要被一个根节点包裹 -->
<div id="app">
<a v-bind:href='url' alt=""> 百度 </a>
<div v-bind:title='title'>title</div>
</div>
</template>
<script>
export default {
name: '#app',
// data: 业务逻辑外面定义的数据
data() {
return {
url: 'http://www.baidu.com',
title: 'title'
}
}
}
</script>
<style>
</style>
Vue 动静绑定款式
Vue.js v-bind 在解决 class 和 style 时，专门加强了它。表达式的后果类型除了字符串之外，还能够是对象或数组