vue项目

初始化项目

nodejs 使用npm install vue-cli vue init webpack 项目名称构建项目

变量

var vm = new vue({ el:“元素id”,修改dom为vue对象 data:数据(用vm.数据访问,vm自身数据用vm.$el访问), computed:{name:{}}属性, watch:{a:function}监视变量值 }) html中{{}}添加表达式,v-if不需要

指令

html标签语句中 v-if、v-for 、v-bind(显示更新属性数据)、v-on:click、v-model(双向绑定)等 自定义指令

Vue.directive('focus', {
// 当绑定元素插入到 DOM 中。
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

组件

  • 全局组件
Vue.component('runoob', {
a: '<h1>自定义组件!</h1>'
props:"text"自定义属性
})
  • 局部组件
new Vue({
el: '#app',
components: {
// <runoob> 将只在父模板可用
'runoob': {a: '<h1>自定义组件!</h1>'}
}
  • 单文件组件 *.vue文件时vue的单文件组件,包含template、script、style三块,通过vue-loader(基于webpack)解析文件 vue组件库element

webpack(js模块打包)

webpack项目的基本配置,可以通过npm install webpack-cli命令后, webpack --config webpack.config.js生成配置文件 webpack-demo |-index.html |-main.js 入口文件 |-App.vue vue文件 |-package.json 工程文件 |-webpack.config.js webpack配置文件 (entry指定要处理的文件入口,output指定输出文件bundle) |-.babelrc Babel配置文件 四个重要组成部分,entry、output、moudle(明确loader)、plugins

输入js输出js

路由

<router-link>导航链接

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • click group list in left launchpad

    Jerry Wang
  • JavaScript展开操作符(Spread operator)介绍

    你可以通过展开操作符(Spread operator)...扩展一个数组对象和字符串。展开运算符(spread)是三个点(…),可以将可迭代对象转为用逗号分隔的...

    用户3158888
  • 使用 husky 和 lint-staged 来构建你的前端工作流

    ESLint 是一个在前端工具链中被众人熟知的代码检查工具,它能够被开发者灵活的配置,使其能够达到我们提前制定好的代码规范的要求,并且在编码过程中实时检测输入的...

    Originalee
  • 技术 | 从零开始,实现你的小程序

    从微信发布的小程序这样的应用形态中,才发现渲染Native(React Native,Weex)并不一定是最优的利用Web能力的解放。在这里我们不讨论微信小程序...

    icepy
  • Django打造大型企业官网(六)

    zhang_derek
  • When is abap.js loaded by Launchpad

    Network里能看到abap.js是在 FioriLaunchpad.html的115行加载的:

    Jerry Wang
  • 技术 | 玩玩rollup与flow,感受一下“大自然”的魅力

    最近撸了两个项目,全程用了rollup,flow,谈一下自己的感受,极力的推荐大家尝试。说起来,用它们还是从Vue换构建工具加入flow开始,就一直想大规模的应...

    icepy
  • CSS自定义属性级联变量var()

    https://www.cnblogs.com/bibibobo/p/6140659.html http://www.ruanyifeng.com/blog/...

    mafeifan
  • 万能工具,完全免费实现各种超实用功能

    电脑已经成为了我们生活和工作的一部分,现在绝大部分人的工作都离不开电脑。当然,学习也离不开电脑,特别是我们大学生要常常在电脑上下载一些学习资料或者论文,就更离不...

    夏末浅笑
  • 技术 | Hybrid载体的变化(三)

    前面两篇文章从客户端的两个角度来说了说变化,今天我们从前端的角度来看一看这些变化,对于我们的工作会有什么样的改变,记得在2013年下半年时在携程做Hybrid ...

    icepy

扫码关注云+社区

领取腾讯云代金券