8. Re‐building the App with Vue - daniel-qa/Vue GitHub Wiki

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>A First App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div id="app">
      <div>
        <label for="goal">Goal</label>
        <input type="text" id="goal" v-model="enteredValue" />
        <button v-on:click="addGoal">Add Goal</button>
      </div>
      <ul>
        <li> v-for="goal in goals">{{goal}} <li>
      </ul>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>
  </body>
</html>

app.js

Vue.createApp({
    data() { 
        return{
            goals: [],
            enteredValue: ''
        };
    },
    methods: {
        addGoal() {
            this.goals.push(this.enteredValue);
            this.enteredValue = '';
        }
    }
}).mount('#app');

//const buttonEl = document.querySelector('button');
//const inputEl = document.querySelector('input');
//const lstEl = document.querySelector('ul');

//function addGoal() {
//    const enteredValue = inputEl.value;
//    const listItemEl = document.createElement('ul');
//    listItemEl.textContent = enteredValue;
//    listEl.appendChild(listItemEl);
//    inputEl.value = '';
//}

//buttonEl.addEventListener('click',

Re-building the App with Vue

为了切换到Vue, 我将标记所有代码, 并注释掉｡

我不会删除它这样我们还能查看并比较｡

因为现在我想用Vue｡

为此, 我们首先需要添加Vue｡

我们需要导入Vue｡

我们可以从 vuejs 做这个｡ (https://vuejs.org/)

官方文件中的说明如何创建Vue项目｡

顺便说一句, 总的来说官方文件确实很好｡

所以除了上这门课

我只能建议您也深入研究官方文档在完成了这门课程之后或者刷新某些概念｡

在这个页面上, 有一个“安装”链接你可以点击

们在这里的快速入门部分, (Quick Start)

您可以找到不同的方法创建Vue项目｡

而最简单的方法是简单地添加从CDN导入到您的页面的Vue包｡

Using the Global Build

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

就是把這段 copy 到 html 檔,(要在 app.js 之前)

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="app.js"></script>

并且您应该确保这里的链接—这个导入链接— 以vue@3或vue@next结尾,

这将允许您的脚本使用Vue｡

那么, 使用Vue是什么意思呢？

有了Vue,

我们可以用完全不同的方式解决同样的问题, 如果你想这样称呼它的话｡

在我们之前使用的常规Javascript 脚本中, 我们使用了一种所谓的命令式方法｡

这意味着我们要一步一步地定义浏览器应该执行的每一个步骤｡

获取对按钮的访问权限､获取对input元素的访问权限､获取对list元素的访问权限､创建函数､

向按钮添加单击事件处理程序并执行此函数发生点击｡

在该函数中, 访问输入的值,

创建一个列表项元素, 添加文本内容, 追加此列表项,

清除值｡

你看到规律了吗？

我们定义每一个步骤｡

借助Vue, 我们可以完全不同方法

在那里,

我们定义了所需的最终结果, 以及Vue应用程序中需要的数据, 然后将其留下

由Vue来确定需要创建什么, 或者在Dom中添加或更改｡

为此,

我们需要以创建一个查看器应用程序, 它可以控制我们HTML代码｡

我们通过调用Vue来实现,

为此,

我们需要创建一个查看器应用程序, 它可以控制我们HTML代码｡

我们通过调用Vue来实现,

Vue是一个全局对象这要归功于我们的视图CDN导入, Vue｡

创建应用程序

这个全局Vue对象, 我们可以调用createApp｡

Vue.CreateAPP();

这个全局Vue对象, 我们可以调用createApp｡

CreateApp接受一个对象,

一个JavaScript对象, 我们在其中配置这个Vue应用程序｡

当我说配置时, 我指的是设置我们将在Vue应用程序中使用哪种数据｡

在本演示中, 我计划使用一个目标列表｡

所以我们只需要一个数据需要是一系列的目标｡

我们需要的另一项数据是用户在此处输入的内容｡

我们定义这些数据

通过向这个对象添加一个data属性, 我们将其传递给createApp, 这必须称为data｡

它实际上是一个函数, 作为一个值,

基本格式

Vue.CreateApp({
    data() { 
        return{

        };
    }
});

加入值

Vue.CreateApp({
    data() { 
        return{
            goals: [],
            enteredValue: ''
        };
    }
});

在这里, 我们可以简单地添加要在此应用程序中管理的数据｡

这将是一个目标数组, 最初为空作为键值对,

以及输入的值（最初为空字符串）｡

现在这两条数据是Vue知道的数据｡

这一点以后会变得很重要｡

现在,

我们可以通过添加一个特殊的所谓的指令, 这是一个特殊的HTML属性｡

这就是 V-Model 属性｡

这不是默认属性, 它由HTML支持｡

这将仅由Vue理解｡

 <div>
   <label for="goal">Goal</label>
   <input type="text" id="goal" v-model="enteredValue" />
   <button>Add Goal</button>
 </div>

它会自动监听用户输入的内容,

每当我们更改输入时更新此输入例如代码中的值｡

当然, 这比手动访问输入并管理所有这些操作要方便得多｡

但这只是第一步｡

现在按下按钮,

我们要确保获得当前并将其添加到目标中｡

为此, 我们可以在传递给createApp的对象中添加另一个键值对, 这就是 methods

我可以添加一个addGoal方法, 然后在其中访问Goals并添加到当前输入值｡

我们可以用这个Goals来做这个,

然后推, 因为Goals是一个数组, 这个输入的值｡

Vue.CreateApp({
    data() { 
        return{
            goals: [],
            enteredValue: ''
        };
    },
    methods: {
        addGoal() {
            this.goals.push(this.enteredValue);
        }
    }
});

现在, 每当单击此按钮时,

都会触发addGoal｡

而不是手动

并添加一个单击侦听器, 就像我们之前做的那样,

在 button 增加 v-on:click，綁定 method addGoal

<button v-on:click="addGoal">Add Goal</button>

在 click 時，會把 input 的值 push 至 enteredValue

v-for 屬性

Vue获取V-for属性, 我们可以将其添加到一个元素上,

以多次复制该元素｡

<li v-for="goal in goals">{{goal}} <li>

根据需要列出项目, 然后在目标数组中为每个目标条

我们需要调用 mount, 并让Vue知道页面的哪个部分应该由该Vue应用程序控制｡

Vue.CreateApp({
    data() { 
        return{
            goals: [],
            enteredValue: ''
        };
    },
    methods: {
        addGoal() {
            this.goals.push(this.enteredValue);
            this.enteredValue = '';
        }
    }
}).mount('#app');

8. Re‐building the App with Vue - daniel-qa/Vue GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️