请选择 进入手机版 | 继续访问电脑版

Java项目实训_2020/12/29

[复制链接]
谢世民 发表于 2020-12-31 18:11:32 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
  1. 1.Vue.js的使用方式        1.1、通过cdn方式举行引用                1.2、官网下载https://cn.vuejs.org/引入项目        1.3、使用vue脚手架vue-cli创建wue项目2.先容是一套用于构建用户界面的渐进式框架与别的大型框架差别的是,vue被设计为可以自底向上逐层应用。vue的核心库只关注视图层,不但易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全可以或许为复杂的单页应用提供驱动。3.声明式渲染Vue.js的核心是一个允许接纳简便的模板语法来声明式地将数据渲染进DOM的系统 ff message }}
  2. var app = new Vue({        el: '#app',        data: {        message: 'Hello Vue!'        }})message1: '页面加载于'+ new Date().toLocaleString()你看到的v-bind attribute被称为指令。指令带有前缀v-,以表现它们是 Vue提供的特殊attribute。PS:body内里都是DOM4.条件和循环现在你看到我了
  3. var app3 = new Vue({Iel: 'ttapp-3',data: {seen: true /false}})数据绑定到DOM文本或attribute,还可以绑定到DOM布局。别的,Vue 也提供一个强大的过渡效果系统,可以在 Vue插入/更新/移除元素时自动应用过渡效果v-if 是条件渲染for循环5.处置惩罚用户的输入——翻转{f message }}
  4. 反转消息
  5. var app5 = new Vue({el: 't#app-5',data: { message: 'Hello Vue.js! },Imethods: {reverseMessage: function () {this.message = this.message.split("").reverse().join("")}}})双向输入6.生命周期钩子每个Vue实例在被创建时都要颠末一系列的初始化过程―—比方﹐需要设置数据监听、编译模板、将实例挂载到DOM并在数据厘革时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在差别阶段添加自己的代码的时机。好比created钩子可以用来在一个实例被创建之后执行代码new Vue({data: { a: 1 ],created: function () {// 'this`指向vm实例console.log('a is: ' + this.a)}})7.插值         {{message}}
  6.                
  7.                
  8.                             将光标悬浮几秒钟后将会看到        
  9. 8.指令指令(Directives)是带有v-前缀的特殊attribute指令的职责是,当表达式的值改变时,将其产生的连带影响响应式地作用于DOM。回首: 现在你看到我了
  10. 这里,v-if指令将根据表达式seen 的值的真假来插入/移除
  11. 元素。点击事件属性绑定:v-bind 可用:表现事件绑定:v-on 可用@ 表现9.盘算属性模板内的表达式非常便利,但是设计它们的初志是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护10.绑定对象语法我们可以传给v-bind:class一个对象,以动态地切换class:
  12. 传入多个class
  13. 数组语法我们可以把一个数组传给v-bind:class,以应用一个class列表:
  14. data: { activeClass: 'active', errorClass: 'text-danger' }ps:样式 .div1{width: 200px;height: 200px;background-color: cadetblue;border-radius: 30px;}阴影:.div3{box-shadow: 10px 10px 10px #999999;}          /* 水平 竖直 阴影的扩散间隔  */
  15. 类的绑定:类名在前表达式在后
复制代码
来源:https://blog.csdn.net/qq_15719613/article/details/111941747
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )