Vue自学官方文档入门【一】

Vue入门之一

1、介绍

Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。

2、起步

可以通过下面的CDN引入Vue(入门过程中暂时不使用vue-cli)


<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>

<script src="https://cdn.jsdelivr.net/npm/vue">script>

3、声明式渲染

Vue的核心是一个允许采用简洁模板语法来声明式地将数据渲染进DOM的系统

文本插值


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <h1 id="app">{
    {message}}h1>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          message: 'hello vue'
        }
      })
    script>
  body>
html>

Vue自学官方文档入门【一】_第1张图片

绑定元素attribute


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <h1 id="app">
      <span v-bind:title="message">鼠标悬停查看信息span>
    h1>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          message: '页面加载于' + new Date().toLocaleString()
        }
      })
    script>
  body>
html>

在这里插入图片描述

4、条件与循环

v-ifv-for

v-if :当seentrue时,h1标签显示,是false时,h1标签隐藏。


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <h1 id="app" v-if="seen">你能看到我吗?h1>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          seen: true
        }
      })
    script>
  body>
html>

v-for


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <div id="app">
      <ol>
        <li v-for="(todo, index) in todos" :key="index">
          {
    {todo.text}}
        li>
      ol>
    div>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          todos: [{
       text: 'Java' }, {
       text: 'Vue' }, {
       text: 'Python' }]
        }
      })
    script>
  body>
html>

Vue自学官方文档入门【一】_第2张图片

5、处理用户输入

v-on指令添加一个事件监听器,通过它调用在Vue实例中定义的方法。


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <h1 id="app">
      <span>{
    {message}}span><br />
      <button v-on:click="reverseMessage">逆转消息button>
    h1>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          message: 'Hello Vue.js'
        },
        methods: {
      
          /*
           * Vue methods中使用箭头函数要注意,this的指向
           */
          // reverseMessage: () => {
      
          //   console.log(this) //这里this指向windows
          //   vue.message = vue.message.split('').reverse().join('')
          // }

          reverseMessage: function () {
      
            console.log(this) //这里this指向vue
            this.message = this.message.split('').reverse().join('')
          }
        }
      })
    script>
  body>
html>

v-model指令实现表单输入应用状态之间的双向绑定


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <div id="app">
      <span>{
    {message}}span><br />
      <input type="text" v-model="message" />
    div>

    <script>
      let vue = new Vue({
      
        el: '#app',
        data: {
      
          message: 'Hello Vue.js!'
        }
      })
    script>
  body>
html>

在这里插入图片描述

6、组件化应用构建

组件系统是Vue的另一个重要概念,因为它是一种抽象,允许我们使用小型、独立和通常可复用的组件构建大型的应用。

几乎任意类型的应用界面都可以抽象为一个组件树:


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Documenttitle>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>
  head>
  <body>
    <div id="app">
      <ul>
        <todo-items
          v-for="(item, index) in groceryList"
          v-bind:key="item.id"
          v-bind:todo="item"
        >todo-items>
      ul>
    div>

    <script>
      Vue.component('todo-items', {
      
        props: ['todo'],
        template: `
  • { {todo.text}}
  • `
    }) let vue = new Vue({ el: '#app', data: { groceryList: [ { id: 0, text: '今天要早起' }, { id: 1, text: '吃午饭' }, { id: 2, text: '早睡' } ] } })
    script> body> html>

    你可能感兴趣的:(Vue官方文档入门,vue)