一、简介(搬砖)
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
<button v-on:click="Fun"></button>
<button @click="Fun"></button>
5、属性绑定 v-bind
<img v-bind:class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="imgSrc">
<div :class="{red: isRed}"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, {classB: isB}]"></div>
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: '<App/>',
components: { App }
})
export default {
name: 'hello',
data: function () {
return {
msg: 'Welcome to Yagiza Demo'
}
}
}
// 注意:
// function与后面()间必须用空格隔开
// function () 与 {}之间,也必须用空格隔开
// msg: 'Welcome to Yagiza Demo'结尾不能使用“;”号
点击查看更多内容
13人点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦