zoukankan      html  css  js  c++  java
  • Vue.js:起步

    ylbtech-Vue.js:起步
    1.返回顶部
    1、

    Vue.js 起步

    每个 Vue 应用都需要通过实例化 Vue 来实现。

    语法格式如下:

    var vm = new Vue({
      // 选项
    })

    接下来让我们通过实例来看下 Vue 构造器中需要哪些内容:

    实例

    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#vue_det',
            data: {
                site: "菜鸟教程",
                url: "www.runoob.com",
                alexa: "10000"
            },
            methods: {
                details: function() {
                    return  this.site + " - 学的不仅是技术,更是梦想!";
                }
            }
        })
    </script>

    尝试一下 »

    点击 "尝试一下" 按钮查看在线实例

    可以看到在 Vue 构造器中有一个el 参数,它是 DOM 元素中的 id。在上面实例中 id 为 vue_det,在 div 元素中:

    <div id = "vue_det"></div>

    这意味着我们接下来的改动全部在以上指定的 div 内,div 外部不受影响。

    接下来我们看看如何定义数据对象。

    data 用于定义属性,实例中有三个属性分别为:site、url、alexa。

    methods 用于定义的函数,可以通过 return 来返回函数值。

    {{ }} 用于输出对象属性和函数返回值。

    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>{{details()}}</h1>
    </div>

    当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。

    实例

    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
    // 它们引用相同的对象!
    document.write(vm.a === data.a) // true
    document.write("<br>")
    // 设置属性也会影响到原始数据
    vm.site = "Runoob"
    document.write(data.site + "<br>") // Runoob
     
    // ……反之亦然
    data.alexa = 1234
    document.write(vm.alexa) // 1234
    </script>

     尝试一下 »

    除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:

    实例

    <div id="vue_det">
        <h1>site : {{site}}</h1>
        <h1>url : {{url}}</h1>
        <h1>Alexa : {{alexa}}</h1>
    </div>
    <script type="text/javascript">
    // 我们的数据对象
    var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000}
    var vm = new Vue({
        el: '#vue_det',
        data: data
    })
     
    document.write(vm.$data === data) // true
    document.write("<br>") // true
    document.write(vm.$el === document.getElementById('vue_det')) // true
    </script>

     2、

    2.返回顶部
     
    3.返回顶部
     
    4.返回顶部
     
    5.返回顶部
    1、
    2、
     
    6.返回顶部
     
    warn 作者:ylbtech
    出处:http://ylbtech.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。
  • 相关阅读:
    (双指针 二分) leetcode 167. Two Sum II
    (双指针) leetcode 485. Max Consecutive Ones
    (双指针) leetcode 27. Remove Element
    (String) leetcode 67. Add Binary
    (数组) leetcode 66. Plus One
    (N叉树 BFS) leetcode429. N-ary Tree Level Order Traversal
    (N叉树 递归) leetcode 590. N-ary Tree Postorder Traversal
    (N叉树 递归) leetcode589. N-ary Tree Preorder Traversal
    (N叉树 DFS 递归 BFS) leetcode 559. Maximum Depth of N-ary Tree
    (BST 递归) leetcode98. Validate Binary Search Tree
  • 原文地址:https://www.cnblogs.com/storebook/p/8535061.html
Copyright © 2011-2022 走看看