Vue.js 2.0 学习重大记录

 

Vue.js兼容性

Vue.js.js 不支持 IE8 及其以下版本,因为 Vue.js.js 使用了 IE8 不可知模仿的 ECMAScript 5 特性。 Vue.js.js 支持所有兼容 ECMAScript 5 的浏览器。

Vue.js安装

安方式产生一定量栽:

1、直接下载用script标签引入(推荐引入开发版本,压缩版本会失去错误提示和警告)

2、使用cdn方法引入

3、npm安装

   npm安装之前提需要安装了nodejs,这里推荐nvm安装nodejs

   附上同小段nvm使用的下令:

 

   

$ nvm install v6.10.2

   $ nvm list 

    * 6.10.2 (Currently using 64-bit executable)

   $ nvm use 6.10.2

   Now using node v6.10.2 (64-bit)

   $ node -v

   v6.10.2

   $ npm -v

   3.10.10



   $ npm install Vue.js

   或者:

   $ cnpm install bower

   $ bower install Vue.js

 

   注意:可以下淘宝定制的 cnpm (gzip
压缩支持) 命令行工具代替默认的 npm:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

诸如此类就可以应用 cnpm
命令来安Vue.js等模块了:

$ cnpm install vue

Vue.js脚手架安装

# 全局安装 Vue.js-cli

$ npm install --global Vue.js-cli

# 创建一个基于 webpack 模板的新项目

$ Vue.js init webpack my-project

# 切换到项目目录,安装依赖

# 下面出现的所有提示 直接回车则选择默认选项或者yes

$ cd my-project

$ npm install

# 运行该项目

$ npm run dev

DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

* 这里默认8080端口,如果想要更改指定端口,找到根目录下config文件夹---index.js

dev: {  

  env: require('./dev.env'),  

  port: 8080,  

  autoOpenBrowser: true,  

  assetsSubDirectory: 'static',  

  assetsPublicPath: '/',  

  proxyTable: {},  

  cssSourceMap: false  

}  

  port可以变更成为我们指定的端口,这里不光可以转移端口,还可以依据需要改其他安排信息。

 

 

 

盖好Vue.js项目事后,想使还localhost:8080产运作起来,在cmd命令框,进入项目根本目录文件夹路径下,然后

npm run dev,则他会运行dev-sever.js文件,之后运行成功,页面自动打开。

 

Vue.js起步

 

var app1=new Vue.js({

            el:”#app1″,

            data:{

                message:”hahahha”+new Date()

            }

        });

 

Vue.js 实例化代码可以一直写new Vue.js,也足以与个价值,当实例化的Vue.js赋值给一个变量之后,在控制台可以直接通过改app1.message等代码,在浏览器可一直看到页面效果。

 

 

<div id=”app3″>

        <ol>

            <li v-for=”todo in todos”>{{todo.text}}</li>

        </ol>

</div>

var app3 = new Vue.js({

           el:”#app3″,

           data:{

                todos:[

                    {text:”aaa”},

                    {text:”bbb”},

                    {text:”ccc”},

                    {text:”ddd”}

                ]

           }

        });

 

 图片 1

  **这边注意:循环的列表项是加载列表标签li标签及之,不是列表盒子上,在决定高输入

  app3.todos.push({text:”eee”});  //5

  app3.todos.push({text:”fff”}); //6

  页面被见面直接显示push进来的列表项,控制台打印出累累组的长度

 

var app4 = new Vue.js({

           el:”#app4″,

           data:{

               message:”我要逆转了”

           },

            methods:{

                reverseMsg:function () {

                    this.message=this.message.split(“”).reverse().join(“”);

                }

            }

        });

 

**此注意:methods方法而加s,否则报错:

  图片 2

父亲组件向子组件传递数据,使子组件接受一个属性:

<div id=”app6″>

        <ol>

            <hello v-for=”item in fruits”
:todo=”item”></hello>

        </ol>

</div>

//定义新组件

        Vue.js.component(‘hello,{

            props:[‘todo’],

            template:”<div>{{todo.text}}</div>”

        });

        var app6 = new Vue.js({

            el:”#app6″,

            data:{

                fruits:[

                    {text:”apple”},

                    {text:”apple2″},

                    {text:”apple3″},

                    {text:”apple4″}

                ]

            }

        })

 

**要害点:使用 v-bind 指令以属于性传到各个一个重复的组件中,缤纷切为它们相当于遍历出来的因素。

Vue.js脚手架运

webstorm eslint配置:推荐一首文章:http://blog.csdn.net/whitehack/article/details/52422873

 

src目录是咱们只要开发之目:

assets: 放置有图形,如logo等。

components: 目录中放了一个零件文件,可以无用。

App.vue.js: 项目进口文件,我们为可以一直将组建写这里,而不使用
components 目录。

main.js: 项目之着力文件。

 

**以要:在App.Vue.js中导入components组件文件夹下写好之零部件,在模板里下组件,导出默认,导出的讳也模板最外层元素的id或者class名称,components写组件名称;单独的零部件写好后也要记导出默认,导出的名字也模板最外层元素的id或者class名称。[这些还以了ES6告诉法格式]

<script>

// 导入组件

import Hello from ‘./components/Hello’

 

export default {

  name: ‘app’,

  components: {

    Hello

  }

}

</script>

 

**当自己先是潮利用时eslint报错:

 图片 3

张冠李戴1:导入的地点必须采取单引号

错误2:在从导出时components属性冒号之后如果加空格,再写大括号

不当3:components属性下写组件名称,应该缩进4单空格

谬误4:在Apple.vue中多写了个s[私家不细心,此类错误尽量避免]

 

当这些错都改就之后,页面正常显示出了:[eslint检查比较严,如果想如果关闭可以活动百度]

 图片 4

Vue.js具体采用

Vue.js 条件

 

v-if、v-else-if、v-else

条件语句的意向:通过判断不同的规格,显示不同之段,类似php条件语句的用法,同样好嵌套v-else-if(2.1.0新添)。

v-show

支配显示隐藏,不支持<template>语法,也非支持 v-else。

Vue.js循环

故而法类似for in循环,所以指令也v-for,(这里切记循环列表项写以循环的单个项目元素上),支持template模版使用。

据此法三种:

item in items

(value, key) in object

(value, key, index) in object

此地发出一个特种的用法:

足迭代整数:

<div id="app">

  <ul>

    <li v-for="n in 10">

     {{ n }}

    </li>

  </ul>

</div>

<script>

new Vue({

  el: '#app'

})

</script>

输出:

图片 5 

只要欲非常频繁地切换,则采用
v-show 较好;如果当运作时规格不太可能改变,则运用
v-if 较好。当 v-if 与 v-for 一起以时,v-for 具有比较 v-if 更强之事先级。

Vue.js 计算属性(对比angular和react的长处之一)

computed vs methods

咱得以下 methods 来取代 computed,效果及片个都是千篇一律的,但是 computed 是冲它的依赖性缓存,只有连带依赖发生变更时才见面又取值。而使用
methods ,在重复渲染的下,函数总会重新调用执行。

可以说利用 computed 性能会再次好,但是一旦您莫愿意缓存,你可以
methods 属性。

computed 默认有getter方法,可以自己定义一个setter方法

Vue.js 样式绑定

v-bind: 可以绑定如下几种植:

对象语法

数组语法

Vue.js class绑定:v-bind:class=”{ }”

Vue.js style(内联样式): v-bind:style=”{ }”

 

示例:

<div id="app12">

        <div v-bind:class="[isActive?active:'',errorClass]">我绑定了不同的class</div>

        <div v-bind:class="{active:isActive,errorClass:hasError}">我绑定了不同的class</div>

        <div v-bind:class="classObject">我绑定了不同的class</div>

        <div v-bind:class="{active:isActive}">我绑定了不同的class</div>

</div>

var app12 = new Vue({

            el:"#app12",

            data:{

                active:"active",

                errorClass:"errorClass",

                isActive:true,

                classObject: {

                    'active': true,

                    'errorClass': true

                },

                hasError:true

            }

        });

图片 6

**注意:

以上从上到下依次为:

u 数组绑定class,数组绑定的class,数组元素是目标的称,在vue data里设描绘对象的值即真正的class名才可以

u 多只目标属性绑定class,

u 直接绑定一个靶绑定class,在vue data里描写对象属性名的时段,可加引号可免加以,但是发生中划线的时节要加。

u 单个对象属性绑定class,根据vue中isActive的状态改变

 

Vue.js表单控件绑定

v-model 会根据控件类型自动选择正确的计来更新元素。

绑定 value

对单选按钮,勾选框及挑选列表选项,
v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值):

<!-- 当选中时,`picked` 为字符串 "a" ,单选按钮-->

<input type="radio" v-model="picked" value="a">

<!-- `toggle` 为 true 或 false ,多选框-->

<input type="checkbox" v-model="toggle">

<!-- 当选中时,`selected` 为字符串 "abc",select选择框 -->

<select v-model="selected">

  <option value="abc">ABC</option>

</select>

不过有时我们怀念绑定 value 到 Vue 实例的一个动态性上,这时可以就此 v-bind 实现,并且这特性之值好免是字符串。

复选框如果是一个虽也逻辑值,如果是基本上单则绑定到同一个数组。

Vue.js组件

以下实例中将 v-bind 指令以 todo 传至各一个更的机件中:

Prop 实例

<div id="app">

    <ol>

    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>

      </ol>

</div> 

<script>

Vue.component('todo-item', {

  props: ['todo'],

  template: '<li>{{ todo.text }}</li>'

})

new Vue({

  el: '#app',

  data: {

    sites: [

      { text: 'Runoob' },

      { text: 'Google' },

      { text: 'Taobao' }

    ]

  }

})

</script>

留意: prop 是仅为绑定的:当父组件的属性变化时,将传输给子组件,但是非见面倒过来。

**这里绑定todo属性是坐父组件不克一直将多少传自定义的子组件及,需要绑定一个特性作为桥梁。

 

报错信息

Vue.js2.0 不支持

$index

报错:

Vue.js.js:569 [Vue.js warn]: Property or method “$index” is not
defined on the instance but referenced during render. Make sure to
declare reactive data properties in the data option.

(found in <Root>)