跟着官网学 Vue

本文主要是介绍跟着官网学 Vue - 基础，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、跟 Vue 说 Hello World！

<!--跟 Vue 说 Hello World！
--><script>
// 导出一个 Vue 组件
export default {// 数据data() {return {message: 'Hello World! lfsun'}}
}
</script><template><!-- 使用数据中的信息渲染标题 --><h1>{{ message }}</h1>
</template>

这是一个简单的 Vue 组件，其中包含了一个数据属性 message，它的值是 ‘Hello World! lfsun’。在模板部分，我们使用双大括号 {{ }} 语法将 message 的值插入到 <h1> 标签中，以在页面上显示 “Hello World! lfsun”。

2、处理用户输入


<!--这个示例展示了如何通过 v-on 指令处理用户输入。
--><script>
// 导出一个 Vue 组件
export default {// 数据data() {return {message: 'Hello World! lfsun'}},// 方法methods: {// 反转消息的方法reverseMessage() {this.message = this.message.split('').reverse().join('')},// 通知的方法notify() {alert('导航受阻.')}}
}
</script><template><!--注意我们不需要在模板中写 .value，因为在模板中 ref 会自动“解包”。--><!-- 显示消息 --><h1>{{ message }}</h1><!--绑定到一个方法/函数。这个 @click 语法是 v-on:click 的简写。--><!-- 反转消息的按钮 --><button @click="reverseMessage">反转 Message</button><!-- 也可以写成一个内联表达式语句 --><!-- 在消息后添加 "!" 的按钮 --><button @click="message += '!'">追加 "!"</button><!--Vue 也为一些像 e.preventDefault() 和 e.stopPropagation()这样的常见任务提供了修饰符。--><!-- 带有 e.preventDefault() 的链接 --><a href="https://vuejs.org" @click.prevent="notify">使用 e.preventDefault() 的链接</a>
</template><style>
/* 样式 */
button, a {display: block;margin-bottom: 1em;
}
</style>

这个示例展示了如何使用 Vue 处理用户输入。通过 v-on 指令，我们绑定了按钮的点击事件，并通过 methods 中的方法来处理这些事件。在模板中，我们使用了插值语法 {{ message }} 来显示数据，并演示了一些常见的事件修饰符，如 .prevent 阻止默认行为。

3、Attribute 绑定

<!--
现在我们将元素的 attribute / property 响应式地绑定到状态上。
这个 :title 语法是 v-bind:title 的简写。
--><script>
export default {data() {return {message: 'Hello World! lfsun',isRed: true,color: 'green'}},methods: {// 切换 isRed 的值，实现红色文字的动态切换toggleRed() {this.isRed = !this.isRed},// 切换 color 的值，实现文字颜色在绿色和蓝色之间切换toggleColor() {this.color = this.color === 'green' ? 'blue' : 'green'}}
}
</script><template><p><!-- 使用动态绑定的方式设置标题 --><span :title="message">将鼠标悬停在我身上几秒钟，就能看到我动态绑定的标题！</span></p><!--除了普通字符串之外，class 绑定还特别支持了对象和数组--><p :class="{ red: isRed }" @click="toggleRed">这应该是红色的......但点击我可以切换它。</p><!-- 样式绑定也支持对象和数组 --><p :style="{ color }" @click="toggleColor">应为绿色，点击后应在绿色和蓝色之间切换。</p>
</template><style>
.red {color: red;
}
</style>

在这个例子中，Vue组件包含了一个数据对象，其中包括message、isRed和color等属性。这些属性被用于演示Vue.js中的动态绑定机制。

具体来说，这个例子演示了以下几个方面：

动态绑定标题 ：使用:title语法（等同于v-bind:title）将<span>元素的title属性与组件的message属性进行动态绑定，实现当鼠标悬停在该元素上时，显示动态绑定的标题。
动态切换类名 ：使用:class语法（等同于v-bind:class）将<p>元素的类与组件的isRed属性进行动态绑定，从而实现在点击该元素时切换红色文字样式。
动态切换样式 ：使用:style语法（等同于v-bind:style）将<p>元素的文字颜色样式与组件的color属性进行动态绑定，从而实现在点击该元素时在绿色和蓝色之间切换文字颜色。

4、条件与循环


<!--
我们可以通过 v-if 和 v-for 指令条件性地或循环地渲染内容。
--><script>
export default {data() {return {show: true,list: [1, 2, 3]}}
}
</script><template><!-- 切换列表的显示与隐藏状态 --><button @click="show = !show">切换列表</button><!-- 在列表末尾添加一个新数字 --><button @click="list.push(list.length + 1)">添加数字</button><!-- 移除列表末尾的数字 --><button @click="list.pop()">移除数字</button><!-- 反转列表的顺序 --><button @click="list.reverse()">反转列表</button><!-- 根据条件渲染列表 --><ul v-if="show && list.length"><!-- 使用 v-for 循环渲染列表项 :key="item"确保每个列表项都有一个唯一的标识符。--><li v-for="item of list" :key="item">{{ item }}</li></ul><!-- 当列表不为空但被隐藏时的提示 --><p v-else-if="list.length">列表不为空，但被隐藏。</p><!-- 当列表为空时的提示 --><p v-else>列表为空。</p>
</template>

这个示例展示了如何在Vue.js中使用v-if和v-for指令来条件性地或循环地渲染内容。具体而言：

按钮操作：有四个按钮，分别用于切换列表的显示与隐藏状态、在列表末尾添加一个新数字、移除列表末尾的数字、以及反转列表的顺序.
条件性渲染列表：使用v-if指令，当show为true且list长度不为零时，渲染一个包含数字的无序列表。这里使用了v-for指令来循环渲染列表项。
条件性提示：如果列表不为空但被隐藏（show为false），则显示提示信息“列表不为空，但被隐藏.”；如果列表为空，则显示提示信息“列表为空.”。这里使用了v-else-if和v-else指令。

5、表单绑定

<script>
export default {data() {return {text: '编辑',checked: true,checkedNames: ['冷风扇1'],picked: '一个',selected: 'A',multiSelected: ['A']}}
}
</script><template><h2>文本输入</h2><input v-model="text"> {{ text }}<h2>复选框</h2><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">已选中: {{ checked }}</label><!--多个复选框可以绑定到相同的 v-model 数组--><h2>多选框</h2><input type="checkbox" id="lfsun1" value="冷风扇1" v-model="checkedNames"><label for="lfsun1">冷风扇1</label><input type="checkbox" id="lfsun11" value="冷风扇11" v-model="checkedNames"><label for="lfsun11">冷风扇11</label><input type="checkbox" id="lfsun111" value="冷风扇111" v-model="checkedNames"><label for="lfsun111">冷风扇111</label><p>已选中的名字: <pre>{{ checkedNames }}</pre></p><h2>单选框</h2><input type="radio" id="one" value="一个" v-model="picked"><label for="one">一个</label><br><input type="radio" id="two" value="两个" v-model="picked"><label for="two">两个</label><br><span>已选择: {{ picked }}</span><h2>选择框</h2><select v-model="selected"><option disabled value="">请选择一个</option><option>A</option><option>B</option><option>C</option></select><span>已选择: {{ selected }}</span><h2>多选选择框</h2><select v-model="multiSelected" multiple style="width:100px"><option>A</option><option>B</option><option>C</option></select><span>已选择: {{ multiSelected }}</span>
</template>

这个示例演示了如何使用Vue.js的v-model指令在状态和表单输入之间创建双向绑定。具体来说：

文本输入 ：展示了如何使用v-model双向绑定文本输入框。
复选框 ：演示了如何使用v-model双向绑定复选框。
多选框 ：展示了如何使用v-model将多个复选框绑定到相同的数组。
单选框 ：演示了如何使用v-model双向绑定单选框。
选择框 ：展示了如何使用v-model双向绑定选择框。
多选选择框 ：演示了如何使用v-model双向绑定多选选择框。

6、简单组件


<!--
这里展示了最简单的组件，它接收一个 prop 并渲染出来。
--><script>
// 引入 TodoItem 组件
import TodoItem from './TodoItem.vue'export default {// 注册 TodoItem 组件components: {TodoItem},data() {return {// 包含待办事项的数组groceryList: [{ id: 0, text: '蔬菜' },{ id: 1, text: '奶酪' },{ id: 2, text: '其他人类应该吃的东西' }]}}
}
</script><template><!-- 使用 TodoItem 组件渲染待办事项列表 --><ol><!--我们给每个 todo 项提供它所表示的 todo 对象，以便能够动态展示内容。同时还需要给每个组件提供一个“key”，这在指南的 v-for 部分有详细解释。--><TodoItemv-for="item in groceryList":todo="item":key="item.id"></TodoItem></ol>
</template>

TodoItem.vue

<script>
export default {props: {todo: Object}
}
</script><template><li>{{ todo.text }}</li>
</template>

这个示例展示了如何创建一个简单的Vue组件，该组件接收一个prop（todo），并在页面上渲染出来。具体来说：

组件引入：通过import TodoItem from './TodoItem.vue'引入了名为TodoItem的组件。
组件注册：在components选项中注册了TodoItem组件，以便在当前组件中可以使用它。
数据：通过data选项定义了一个包含待办事项的数组groceryList。
使用组件：在模板中使用v-for指令循环遍历groceryList数组，为每个待办事项创建一个TodoItem组件实例。通过:todo="item"将当前待办事项传递给TodoItem组件，并通过 :key="item.id" 给每个组件提供一个唯一的标识符。