友好定价、专业客服支持、正版软件一站式服务提供
工作日：9:00-22:00
发布时间：2024-10-04
浏览次数：0
你好，Vue
既然学习编程，就遵循古老的传统仪式。
首先，我们创建一个新的todos.html文件，用任何你喜欢的文本编辑器或IDE（例如记事本、++等）打开它，然后编写以下代码：
html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorialtitle>head>
<body>
<div id="app">{{ message }}div>
body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {message: 'Hello Vue!'}
}
})
script>
html>
我们编写了一个简单的 HTML 文件并使用标签引入了 Vue。版本是2.5.16。然后我们写了几行js代码。在代码中，我们new（创建）一个Vue对象，并向这个对象传递一些选项，比如告诉Vue挂载的元素（el，它的缩写）是id为app的div，绑定在data中 一个名为“Hello Vue!”的变量，然后我们可以在 HTML 文档中引用它。 Vue 稍后为我们做了很多神奇的事情。它将 {{ }} 替换为 Vue 对象中的相应值。
保存代码并使用浏览器打开它。可以看到浏览器显示“Hello Vue!”。也可以尝试修改该值，发现显示的内容也会随之改变。
表格装订
我们再看一个神奇的例子。我们将代码更改为以下内容：
html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue Todo Tutorialtitle>head>
<body>
<div id="app">
<input type="text" v-model="value">
<input type="button" value="发送">
<div>value 的值是：{{ value }}div>
div>
body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js">script>
<script>
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
}
})
script>
html>
这里要注意文档的input标签中的v-model="value"。 v-model 被称为 Vue 指令。指令可以用来做很多事情sublime text js提示，比如v-if用于if条件判断，v-bind用于绑定值，v-on用于绑定监听事件等等，等等，稍后我们会接触到这个。这个v-model指令的作用就是将input元素的value属性的值绑定到我们创建的Vue对象中的value的值。我们知道input有一个value属性，它的值会显示在浏览器中（比如后一个按钮），Vue绑定这个值后，input中引起的值变化会反映到关联的Vue对象中实时，因此您会看到下面引用的 {{ value }} 也会相应变化。
打开浏览器，在文本框中输入一些内容来试试效果！
如何添加积分
接下来，我们向 Vue 对象添加一些方法。还是上面的例子，只不过我们只是给Vue对象添加了一个方法：
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
},
// 这是新增的方法
methods: {
send: function () {
alert('发送成功！');
this.value = ''
}
}
})
方法在对象中声明，key是方法名，value是对应的函数。我们要做的很简单，就是点击发送按钮后显示一条成功的消息，然后清除该值。
打开浏览器，发现没有任何效果！因为Vue不知道我们点击了按钮，为了让Vue监听到我们点击按钮的事件，我们需要给被点击的元素绑定一个点击事件。前面提到，v-on是用来绑定事件的，所以在发送按钮上添加相应的代码：
<input type="button" value="发送" v-on:click="send"/>
在输入框中输入一些文本，然后单击发送按钮进行尝试。
计算属性
Vue还可以根据绑定的数据进行一些计算，然后我们可以引用计算结果。假设我们要统计实时输入的单词数，我们可以将计算出的值长度添加到Vue对象中：
var app = new Vue({
el: '#app',
data: function () {
return {value: ''}
},
methods: {
// 省略...
},
// 这是新增的计算属性
computed: {
count: function () {
return this.value.length
}
}
})
计算属性被声明为对象。这个对象的key是计算结果，value是计算函数。这里我们计算值的长度。以后可以在Vue对象中使用this.count引用计算结果，也可以直接在关联模板中引用，这和绑定数据值的用法非常相似。例如，我们在文档中引用这个计数：
<div id="app">
<input type="text" v-model="value">
<input type="button" value="发送" v-on:click="send"/>
<div>value 的值是：{{ value }}div>
<div>字数：{{ count }}div>
div>
打开浏览器看看效果。
添加圆点样式
Vue 还可以动态地帮助我们将样式（类属性）绑定到元素上。假设我们不想在input中输入任何值，即当值为空时，input的边框会变成红色，提醒用户没有内容。首先我们写一个简单的样式（这个样式非常简单，你不需要有 CSS 知识就能理解它）。样式通常写在head标签中，并用style包裹起来：
<head>
<meta charset="UTF-8"><title>Vue Todo Tutorialtitle>
<style>
.empty {
border-color: red;
}
style>
head>
然后用这个empty作为input的class属性，浏览器就会渲染出对应的样式：
<div id="app">
<input type="text" class='empty' v-model="value">
...
div>
当然，无论值是多少，边框总是红色的，因为类总是空的。现在让 Vue 来帮助我们。前面提到，v-bind 指令用于绑定值。让我们修改代码并将一个值绑定到输入类：
<div id="app">
<input type="text"
v-bind:class='{empty: !count}'
v-model="value">
...
div>
Vue 会根据empty后的!count表达式的真假来判断class的值是否为空。如果为true（即count = 0），则class的值为空，否则为空。
打开浏览器看看效果！
实践
通过这些循序渐进的例子，我们体验了Vue的一些核心功能，这对于我们开发Todo应用程序非常有帮助。当然，这个例子仍然有一些小缺陷sublime text js提示，所以你可以作为练习来改进它。
练习1：虽然我们在用户没有输入的情况下使用红色边框来提醒用户内容为空，但是在用户点击按钮后仍然显示提交成功的通知是不合理的。合理的情况应该是弹出通知提示用户输入内容。修改示例代码即可实现上述效果。 （提示：修改发送方式）
练习2：即使内容为空，输入框下方仍然显示value的值，看起来很奇怪。我们希望只有在用户真正输入内容之后，才会提示value的值。请参考Vue官方关于指令的文档，找到符合我们需求的指令，并修改示例代码，实现上述效果。 （提示：我们应该通过判断value是否有值来决定是否显示输入框下方的div元素。）
Vue 指令文档：
接下来，让我们正式开始我们的Todo应用程序的开发吧！
如有侵权请联系删除！
官方公众号
Copyright © 2023 江苏优软数字科技有限公司 All Rights Reserved.正版sublime text、Codejock、IntelliJ IDEA、sketch、Mestrenova、DNAstar服务提供商
Copyright © 2023 江苏优软数字科技有限公司 All Rights Reserved.正版sublime text、Codejock、IntelliJ IDEA、sketch、Mestrenova、DNAstar服务提供商
13262879759
微信二维码