vue学习-我的第一个vue代码

vue学习-我的第一个vue代码创建一个 .html 文件,然后通过如下方式引入 Vue:

<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者:

<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

看个简单的示例:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>www.125jz.com-vue</title>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <div id="app">
   {{text}}
  </div>
  <script>
   var vm=new Vue({
    el:"#app",
    data:{
     text:'文本数据被渲染到HTML中了哦!'
    }
   })
  </script>
 </body>
</html>

除了文本插值,我们还可以像这样来绑定元素 attribute:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息!
  </span>
</div>
var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

v-bind attribute 指令带有前缀 v-,以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了,它们会在渲染的 DOM 上应用特殊的响应式行为。在这里,该指令的意思是:“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

如果你再次打开浏览器的 JavaScript 控制台,输入 app2.message = ‘新消息’,就会再一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

VUE官方教程:https://cn.vuejs.org/v2/guide/

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/7196.html

(0)
江山如画的头像江山如画管理团队
上一篇 2020年6月13日 下午4:58
下一篇 2020年6月14日 上午9:25

99%的人还看了以下文章

  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    1.1K0
  • 第15课:用z-index进行层次堆叠

    CSS可以处理高度、宽度、深度三个维度。在前面的课程中,我们已经了解了前两个维度。在本课中,我们将学习如何令不同元素具有层次。简言之,就是关于元素堆叠的次序问题。 为此,你可以为每个元素指定一个数字(z-index)。其原理是:数字较大的元素将叠加在数字较小的元素之上。 比方说,我们正在打扑克,并且拿了一手同花大顺。我们可以通过为各张牌设定一个z-index…

    2020年2月25日
    3.5K0
  • 手把手教你做响应式网页,响应式布局实例入门(精)

    刚接触响应式布局的童鞋会感觉响应式布局很高大上,很难,但实际上只用CSS就能实现响应式布局。今天中国网页设计通过一个响应式布局实例,手把手教你如何制作响应式网页。 响应式布局(Responsive Layout) 响应式布局分别为不同的屏幕分辨率定义布局,同时,在每个布局中,应用流式布局的理念,即页面元素宽度随着窗口调整而自动适配。 响应式布局实例 当窗口大…

    2018年7月28日
    5.3K0
  • 6个实例教你学会JavaScript的箭头函数

    在看别人JS代码时,经常会看到一些类似下面代码的箭头函数,如果你没有接触过箭头函数,估计要看晕了,这些都是什么东西?今天中国网页设计通过6个实例,教给大家掌握箭头函数的语法及使用。

    2018年2月17日
    3.7K0
  • CSS3动画:@keyframes animation 案例——制作滚动公告

    滚动公告的制作请参阅:Marquee标签实现跑马灯、滚动公告、通知效果 今天我们使用CSS3的@keyframes和animation 制作滚动文字公告。 @keyframes规则 @keyframes 规则用于创建动画。在@keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果。 注释:当动画完成后,动画的状态会回到初始状…

    2019年2月26日
    7.2K0
  • 实现表格单线边框的两种方法

    实现表格单线边框方法一 border-collapse: collapse; 代码如下: See the Pen 实现表格单线边框的两种方法 by 江山如画 (@jgyzhr)on CodePen. 实现表格单线边框方法二 给table上边和左边设上边框线,给td下边和右边设上边框线 See the Pen 实现表格单线边框方法二 by 江山如画 (@jgy…

    2019年10月31日
    6.1K0

发表回复

登录后才能评论