vuejs2.0从入门到放弃-入门实例(四)

作者:安小夏

来源:http://blog.qianduanchina.cn/post/5a4450882d630d5801b945f6

最近,很多小伙伴有疑惑,想学vuejs必须先了解复杂的构建工具和命令行操作吗!!答案是否定的!

对于很多做前端的同学,涉及到命令行和构建工具,想必大家都比较发憷,没有人指导,根本就不理解不了命令行的操作,导致好多想学习vue的同学被扼杀在摇篮里。今天就跟大家一起开启,没有命令行的vue学习之旅,本文适合小白,高手自动忽视。

现在,大部分的vuejs的资料都是用vue-cli去构建项目的,给不懂nodejs、不会命令行操作的前端小白们设置了很高的门槛,由于本人也是小白一步一步走过来的,所以,对此事深有体会,废话不多说。

vuejs本来很简单易上手的,初学阶段,我们完全可以像使用jquery一样去使用vuejs。直接用

如果你没有vuejs文件,可以去github上搜vue,结果里第一个star数量最多的就是咯,去路径 vue/dist/ 下载 vue.js 或者 vue.min.js 都可以,就像jquery.js 和 jquery.min.js一个道理。如下图

接下来,就可以正常使用vuejs了。

vue快速上手

个人信息

我叫{}

我今年{}岁了

我是做{}工作的

// 个人信息数据

var userInfo = {

name: '安小夏',

age: 18,

job: 'web前端'};

// 实例化一个 vue 对象var vm = new Vue({

// vue 对象的容器

el: '.container',

// 数据对象集合

data: {

// 预留出person占位,防止报错

person:{}

},

// 方法集合

methods: {

getData: function(){

// this.person 指向的是 data.person

this.person = userInfo;

}

}});

// 在vue体系外,直接把数据赋值给vue实例对象vm,也能达到同样的效果

document.getElementById('btn').addEventListener('click', function(){

// vm 为vue的实例对象,通过vm实例对象,

我们可以引用它的数据或者调用他的方法,

vue会自动判断你引用的是数据(data)还是方法(methods)

vm.getData();}, false);

到这里,事情就变得简单了,如果我想用ajax的方式获取数据,no problem,只需要修改getData方法就好,把获取到的数据赋值给 this.person 对象就OK了。

原理就是这样,我这里只是抛砖隐玉,要把项目做好,还需要举一反三的去学习和体会。

说了这么多废话,希望能对想学习vuejs的新手们有些许帮助,时间仓促,如有纰漏和疑问,欢迎留言探讨。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180521B1B6YF00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励