开发者社区> 技术小阿哥> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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使用的命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
$ 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:

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

这样就可以使用 cnpm 命令来安装Vue.js等模块了:

1
$ cnpm install vue

Vue.js脚手架安装

  port可以改成我们指定的端口,这里不仅可以改变端口,还可以根据需要改变其他配置信息。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 全局安装 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  }

 

建好Vue.js项目之后,想要再次localhost:8080下运行起来,在cmd命令框,进入项目根目录文件夹路径下,然后

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

 

Vue.js起步

1
2
3
4
5
6
var app1=new Vue.js({
            el:"#app1",
            data:{
                message:"hahahha"+new Date()
            }
        });

 

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

1
2
3
4
5
<div id="app3">
        <ol>
            <li v-for="todo in todos">`todo`.`text`</li>
        </ol>
</div>
1
2
3
4
5
6
7
8
9
10
11
var app3 = new Vue.js({
           el:"#app3",
           data:{
                todos:[
                    {text:"aaa"},
                    {text:"bbb"},
                    {text:"ccc"},
                    {text:"ddd"}
                ]
           }
        });

 

 

  **这里注意:循环的列表项是加载列表标签li标签上的,不是列表盒子上,在控制台输入

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

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

  页面中会直接显示push进来的列表项,控制台打印出数组的长度

 

1
2
3
4
5
6
7
8
9
10
11
var app4 = new Vue.js({
           el:"#app4",
           data:{
               message:"我要逆转了"
           },
            methods:{
                reverseMsg:function () {
                    this.message=this.message.split("").reverse().join("");
                }
            }
        });

 

**这里注意:methods方法要加s,否则报错:

  

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

1
2
3
4
5
<div id="app6">
        <ol>
            <hello v-for="item in fruits" :todo="item"></hello>
        </ol>
</div>

//定义新组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
        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语法格式]

1
2
3
4
5
6
7
8
9
10
11
<script>
// 导入组件
import Hello from './components/Hello'
  
export default {
  name: 'app',
  components: {
    Hello
  }
}
</script>

 

**在我第一次使用时eslint报错:

 

错误1:导入的地址必须使用单引号

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

错误3components属性下写组件名称,应该缩进4个空格

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

 

当这些错误都修改完成之后,页面正常显示出来了:[eslint检查比较严格,如果想要关闭可以自行百度]

 

Vue.js具体使用

Vue.js 条件

 

v-ifv-else-ifv-else

条件语句的作用:通过判断不同的条件,显示不同的区块,类似php条件语句的用法,同样可以嵌套v-else-if2.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

这里有一个特殊的用法:

可以迭代整数:

1
2
3
4
5
6
7
<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}    
    </li>
  </ul>
</div>
1
2
3
4
5
<script>
new Vue({
  el: '#app'
})
</script>

输出:

 

如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件不太可能改变,则使用 v-if 较好。当 v-if 与 v-for 一起使用时,v-for 具有比 v-if 更高的优先级。

Vue.js 计算属性(对比angularreact的优点之一)

computed vs methods

我们可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。而使用 methods ,在重新渲染的时候,函数总会重新调用执行。

可以说使用 computed 性能会更好,但是如果你不希望缓存,你可以使用 methods 属性。

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

Vue.js 样式绑定

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

对象语法

数组语法

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

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

 

示例:

1
2
3
4
5
6
<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>
1
2
3
4
5
6
7
8
9
10
11
var app12 = new Vue({
            el:"#app12",
            data:{
                active:"active",
                errorClass:"errorClass",
                isActive:true,
                classObject: {                    'active'true,                    'errorClass'true
                },
                hasError:true
            }
        });


**注意:

以上从上到下依次为:

数组绑定class,数组绑定的class,数组元素是对象的名称,在vue data里要写对象的值即真正的class名才可以

多个对象属性绑定class,

直接绑定一个对象绑定class,vue data里写对象属性名的时候,可加引号可不加,但是有中划线的时候必须加。

单个对象属性绑定class,根据vueisActive的状态改变

 

Vue.js表单控件绑定

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

绑定 value

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

1
2
3
4
5
6
7
8
<!-- 当选中时,`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 实例

1
2
3
4
5
<div id="app">
    <ol>
    <todo-item v-for="item in sites" v-bind:todo="item"></todo-item>
      </ol>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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>)

 

本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1940679,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Hello,Vue.js!——开启 Vue 学习
Vue (读音 /vju:/ ,类似于 view)。
0 0
初识Vue.js ——简单的指令学习、了解MVVM思想(介绍Vue)
把不同的业务代码放到不同的模块中,再通过特定的逻辑组织到一块。双向绑定的方式,从试图到模型用事件监听,从模型到试图用的是数据绑定。
0 0
前端学习:Vue.js基本使用
前端学习:Vue.js基本使用
0 0
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-3.nginx配置web服务器并安装网站环境
每次我们登录服务器都需要到登录阿里云进入实例,而为了更方便且一些后续工作的执行,现在下载git bash进行ssh命令远程连接服务器。
0 0
技能学习:学习使用Node.js + Vue.js,开发前端全栈网站-14-2.购买域名服务器并解析域名到服务器
以阿里云为例,之前使用PHP搭建网站时就开始使用,售前售后运营工作人员解决问题很好,非常方便。
0 0
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载
Vue.js 在前端服务化上的探索与实践
立即下载