首页 > IT职业 > IT职场 > Vue.js 入门总结(开发环境搭建、常用指令)
一、简介(搬砖)
Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
二、开发环境搭建
使用nodejs npm或国内cnpm环境安装
全局安装vue-cli
npm install -g vue-cli 创建一个基于“webpack”模板的新项目
vue init webpack my-project 安装项目依赖(详见packpage.json中配置项)
第一步进入项目目录my-project
cd my-project
npm install 运行/启动项目
npm run dev 三、App.vue到页面
XX.vue -> webpack -> XX.html/XX.js(new Vue({}))/XX.css
四、Vue.js组件的重要选项
new Vue({
data: {
// 数据
},
methodes: {
// 方法
},
watch: {
// 监测数据变化
}
}) 五、常用指令
1、数据渲染 v-text、v-html、{{}}
2、控制模块的显示/隐藏 v-if、v-show
实质是改变css样式display属性
3、渲染循环列表 v-for
4、事件绑定 v-on
5、属性绑定 v-bind
6、总结
① new 一个vue对象时,你可以设置它的属性,其中最重要的三个属性为:data、methodes、watch
② data 代表 vue对象的数据,methods代表其方法、watch设置对象监听的方法
③ Vue对象里的设置通过html指令进行关联
六、vue.js框架代码
import Vue from 'vue'
import App from './App'
// import ES6语法,export、const 均为ES6语法
// 以上代码相当于 var App = require('./App')
new Vue({
el: '#app',
template: ' ',
components: { App }
}) export default {
name: 'hello',
data: function () {
return {
msg: 'Welcome to Yagiza Demo'
}
}
}
// 注意:
// function与后面()间必须用空格隔开
// function () 与 {}之间,也必须用空格隔开
// msg: 'Welcome to Yagiza Demo'结尾不能使用“;”号 来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/4365/viewspace-2798359/ ,如需转载,请注明出处,否则将追究法律责任。