vue.js网站建设,网站建设流程公司,网络营销的营销模式,wordpress友链插件转载自 vuejs2.0从入门到放弃--入门实例#xff08;四#xff09;最近#xff0c;很多小伙伴有疑惑#xff0c;想学vuejs必须先了解复杂的构建工具和命令行操作吗#xff01;#xff01;答案是否定的#xff01;
对于很多做前端的同学#xff0c;涉及到命令行和构建工…转载自 vuejs2.0从入门到放弃--入门实例四最近很多小伙伴有疑惑想学vuejs必须先了解复杂的构建工具和命令行操作吗答案是否定的
对于很多做前端的同学涉及到命令行和构建工具想必大家都比较发憷没有人指导根本就不理解不了命令行的操作导致好多想学习vue的同学被扼杀在摇篮里。今天就跟大家一起开启没有命令行的vue学习之旅本文适合小白高手自动忽视。
现在大部分的vuejs的资料都是用vue-cli去构建项目的给不懂nodejs、不会命令行操作的前端小白们设置了很高的门槛由于本人也是小白一步一步走过来的所以对此事深有体会废话不多说。
vuejs本来很简单易上手的初学阶段我们完全可以像使用jquery一样去使用vuejs。直接用script标签引入就这么简单如果会用script标签引入并使用jquery那么你就踏出了使用vuejs的第一步。
script src你的路径/vue.js/script如果你没有vuejs文件可以去github上搜vue结果里第一个star数量最多的就是咯去路径 vue/dist/ 下载 vue.js 或者 vue.min.js 都可以就像jquery.js 和 jquery.min.js一个道理。如下图接下来就可以正常使用vuejs了。
!DOCTYPE html
html
head
meta charsetUTF-8
titlevue快速上手/title
style typetext/css/style
/head
body
div classcontainerh3个人信息/h3!-- person 指向 vm实例的data.person对象 --p我叫{{person.name}}/pp我今年{{person.age}}岁了/pp我是做{{person.job}}工作的/p
/divscript typetext/javascript src你的路径/vue.js/script
script typetext/javascript
// 实例化一个 vue 对象
var vm new Vue({// vue 对象的容器el: .container,// 数据对象集合data: {// 预留出person占位防止报错person:{}},// 方法集合methods: {}
})
/script
/body
/html
这个时候界面是这样的如下图接下来我们来获取个人信息的数据这里有两种方法可以获取。第一种直接在vue体系内在methods方法集合中获取。第二种由于vue跟一些UI框架如layui一起用的时候会导致一些form类的组件不能用个人猜测是因为事件监听导致的所以我们在整个页面的结构上获取数据然后复制给vue实例。
直接在vue体系内获取数据我们模拟一个ajax获取数据的方法如下
!DOCTYPE html
html
head
meta charsetUTF-8
titlevue快速上手/title
style typetext/css/style
/head
body
div classcontainerh3个人信息/h3!-- person 指向 vm实例的data.person对象 --p我叫{{person.name}}/pp我今年{{person.age}}岁了/pp我是做{{person.job}}工作的/p!-- 点击按钮去个人信息数据 --button clickgetData获取数据/button
/divscript typetext/javascript src你的路径/vue.js/script
script typetext/javascript
// 个人信息数据
var userInfo {name: 安小夏,age: 18,job: web前端
};// 实例化一个 vue 对象
var vm new Vue({// vue 对象的容器el: .container,// 数据对象集合data: {// 预留出person占位防止报错person:{}},// 方法集合methods: {getData: function(){// this.person 指向的是 data.personthis.person userInfo;}}
})
/script
/body
/html
运行以上代码点击“获取数据”按钮会看到 变量 userInfo 里的数据会显示到页面中如下图所示是不是很简单省去了很多操作DOM的步骤瞬间感觉自己的年轻了。
