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 时， 专门加强了它。表达式的后果类型除了字符串之外，还能够是对象或数组