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

江山如画 • 2020年6月14日上午9:15 • 网页制作 • 阅读 1893

创建一个 .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