您尚未登录,请登录后浏览更多内容! 登录 | 立即注册

QQ登录

只需一步,快速开始

 找回密码
 立即注册

QQ登录

只需一步,快速开始

cncml手绘网 首页 站长博文 学习笔记 查看内容

[Vue.js] Vue.js 起步

2019-11-1 12:01| 发布者: admin| 查看: 461| 评论: 0|原作者: admin

摘要: Vue.js 起步每个 Vue 应用都需要通过实例化 Vue 来实现。语法格式如下:var vm = new Vue({ // 选项 })复制代码接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:div id=vue_det h1site : {{site}}/h1 h1u ...
Vue.js 起步
每个 Vue 应用都需要通过实例化 Vue 来实现。
语法格式如下:
  1. var vm = new Vue({
  2.   // 选项
  3. })
复制代码
接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:
  1. <div id="vue_det">
  2.     <h1>site : {{site}}</h1>
  3.     <h1>url : {{url}}</h1>
  4.     <h1>{{details()}}</h1>
  5. </div>
  6. <script type="text/javascript">
  7.     var vm = new Vue({
  8.         el: '#vue_det',
  9.         data: {
  10.             site: "菜鸟教程",
  11.             url: "www.runoob.com",
  12.             alexa: "10000"
  13.         },
  14.         methods: {
  15.             details: function() {
  16.                 return  this.site + " - 学的不仅是技术,更是梦想!";
  17.             }
  18.         }
  19.     })
  20. </script>
复制代码
可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:
  1. <div id = "vue_det"></div>
复制代码
这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性,实例中有三个属性分别为:site、url、alexa。
methods 用于定义的函数,可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。
  1. <div id="vue_det">
  2.     <h1>site : {{site}}</h1>
  3.     <h1>url : {{url}}</h1>
  4.     <h1>{{details()}}</h1>
  5. </div>
复制代码
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。
  1. <div id="vue_det">
  2.     <h1>site : {{site}}</h1>
  3.     <h1>url : {{url}}</h1>
  4.     <h1>Alexa : {{alexa}}</h1>
  5. </div>
  6. <script type="text/javascript">
  7. // 我们的数据对象
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
  9. var vm = new Vue({
  10.     el: '#vue_det',
  11.     data: data
  12. })
  13. // 它们引用相同的对象!
  14. document.write(vm.a === data.a) // true
  15. document.write("<br>")
  16. // 设置属性也会影响到原始数据
  17. vm.site = "Runoob"
  18. document.write(data.site + "<br>") // Runoob

  19. // ……反之亦然
  20. data.alexa = 1234
  21. document.write(vm.alexa) // 1234
  22. </script>
复制代码
除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
  1. <div id="vue_det">
  2.     <h1>site : {{site}}</h1>
  3.     <h1>url : {{url}}</h1>
  4.     <h1>Alexa : {{alexa}}</h1>
  5. </div>
  6. <script type="text/javascript">
  7. // 我们的数据对象
  8. var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
  9. var vm = new Vue({
  10.     el: '#vue_det',
  11.     data: data
  12. })

  13. document.write(vm.$data === data) // true
  14. document.write("<br>") // true
  15. document.write(vm.$el === document.getElementById('vue_det')) // true
  16. </script>
复制代码



鲜花

握手

雷人

路过

鸡蛋

最新评论

关闭

站内最热文章上一条 /1 下一条

GMT+8, 2024-3-29 08:45 , Processed in 0.105635 second(s), 27 queries .

Copyright © 2001-2024 Powered by cncml! X3.2. Theme By cncml!