vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

最新推荐文章于 2023-03-05 22:39:06 发布

weixin_33872566

最新推荐文章于 2023-03-05 22:39:06 发布

阅读量90

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/395965

版权

这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。

!官方文档：https://cn.vuejs.org/v2/guide/

01. vue 介绍

<html>
<head>
    <meta charset="utf-8"/>
    <title>vue 介绍</title>
    
    <!-- <script src="js/vue.min.js"></script> -->
    <script src="https://unpkg.com/vue"></script>
</head>
<body>
    <!-- 官方文档：https://cn.vuejs.org/v2/guide/ -->
    
    
    <!-- 绑定 -->
    <div id="app">
      <!-- ①声明式渲染 -->
      <p>{{ info }}</p>
      <p v-text="info"></p>
      <p v-html="info"></p>
      <p v-once>{{ info }}</p>
      
      <p>{{ info }}</p>
      <p>{{ info.concat("!!!") }}</p>
      <p>{{ info ? "has info" : "no info" }}</p>
      <!-- <p>{{ var info2 = "info2" }}</p> -->
      <!-- <p>{{ if (info) {return "info2"} }}</p> -->
      
      <!-- ②绑定元素特性 -->
      <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
      
      <!-- ③条件：控制切换一个元素是否显示 -->
      <p v-if="seen">现在你看到我了</p>
      
      <!-- ④循环：绑定数组的数据来渲染一个项目列表 -->
      <ol>
        <li v-for="todo in todos">
          {{ todo.text }}
        </li>
      </ol>
      
      <!-- ⑤处理用户输入 -->
      <button v-on:click="reverseMessage">逆转消息</button>
      
      </br>
      <!-- ⑥表单输入和应用状态之间的双向绑定 -->
      <input v-model="info">
      
      <!-- ⑦使用组件 -->
      <ol>
        <todo-item
          v-for="item in groceryList"
          v-bind:todo="item"
          v-bind:key="item.id">
        </todo-item>
      </ol>
      
      <!-- ①②③④⑤⑥⑦⑧⑨⑩ -->
    </div>

    <!-- 数据 -->
    <script>
    var data = {
        info : "Hello world", // ①⑥
        message: '页面加载于 ' + new Date().toLocaleString(), // ②
        seen: true, // ③
        todos: [ // ④
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ],
        
        groceryList: [ // ⑦
          { id: 0, text: '蔬菜' },
          { id: 1, text: '奶酪' },
          { id: 2, text: '随便其它什么人吃的东西' }
        ]
        
    }
    
    // 注册组件（全局）// ⑦
    Vue.component('todo-item', {
      props: ['todo'],
      template: '<li>{{ todo.text }}</li>'
    })
    
    // 创建根实例
    var vm = new Vue({
      el: '#app',
      data: data,
      
      methods: {
        reverseMessage: function () { // ⑤
          this.message = this.message.split('').reverse().join('')
        }
      }
    })
    </script>

</body>
</html>

本文转自罗兵博客园博客，原文链接：http://www.cnblogs.com/hhh5460/p/8097559.html ，如需转载请自行联系原作者

weixin_33872566

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

这是我的vue.js 2.0的学习笔记，采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来，方便自己查阅。!官方文档：https://cn.vuejs.org/v2/guide/01. vue 介绍<html><head> <meta charset="utf-8"/> <ti...
复制链接

扫一扫