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

简介: 这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式。目的是保存下来,方便自己查阅。!官方文档:https://cn.vuejs.org/v2/guide/01. vue 介绍 vue 介绍 ...

这是我的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>
目录
相关文章
|
12天前
|
数据采集 监控 JavaScript
在 Vue 项目中使用预渲染技术
【10月更文挑战第23天】在 Vue 项目中使用预渲染技术是提升 SEO 效果的有效途径之一。通过选择合适的预渲染工具,正确配置和运行预渲染操作,结合其他 SEO 策略,可以实现更好的搜索引擎优化效果。同时,需要不断地监控和优化预渲染效果,以适应不断变化的搜索引擎环境和用户需求。
|
4天前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
14天前
|
JavaScript
Vue 指令速查表
【10月更文挑战第12天】Vue 指令速查表
|
4天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
|
12天前
|
缓存 JavaScript 搜索推荐
Vue SSR(服务端渲染)预渲染的工作原理
【10月更文挑战第23天】Vue SSR 预渲染通过一系列复杂的步骤和机制,实现了在服务器端生成静态 HTML 页面的目标。它为提升 Vue 应用的性能、SEO 效果以及用户体验提供了有力的支持。随着技术的不断发展,Vue SSR 预渲染技术也将不断完善和创新,以适应不断变化的互联网环境和用户需求。
30 9
|
11天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式,可以实现组件的按需加载,减少资源浪费,提高应用的响应速度和用户体验。在实际应用中,需要根据具体情况选择合适的懒加载方式,并结合性能优化的其他措施,以打造更高效、更优质的 Vue 应用。
|
10天前
|
JavaScript
如何在 Vue 中使用具名插槽
【10月更文挑战第25天】通过使用具名插槽,你可以更好地组织和定制组件的模板结构,使组件更具灵活性和可复用性。同时,具名插槽也有助于提高代码的可读性和可维护性。
14 2
|
10天前
|
JavaScript
Vue 中的插槽
【10月更文挑战第25天】插槽的使用可以大大提高组件的复用性和灵活性,使你能够根据具体需求在组件中插入不同的内容,同时保持组件的结构和样式的一致性。
12 2
|
10天前
|
前端开发 JavaScript 容器
在 vite+vue 中使用@originjs/vite-plugin-federation 模块联邦
【10月更文挑战第25天】模块联邦是一种强大的技术,它允许将不同的微前端模块组合在一起,形成一个统一的应用。在 vite+vue 项目中,使用@originjs/vite-plugin-federation 模块联邦可以实现高效的模块共享和组合。通过本文的介绍,相信你已经了解了如何在 vite+vue 项目中使用@originjs/vite-plugin-federation 模块联邦,包括安装、配置和使用等方面。在实际开发中,你可以根据自己的需求和项目的特点,灵活地使用模块联邦,提高项目的可维护性和扩展性。
|
11天前
|
JavaScript 前端开发 UED
vue 提高 tree shaking 的效果
【10月更文挑战第23天】提高 Vue 中 Tree shaking 的效果需要综合考虑多个因素,包括模块的导出和引用方式、打包工具配置、代码结构等。通过不断地优化和调整,可以最大限度地发挥 Tree shaking 的优势,为 Vue 项目带来更好的性能和用户体验。