VUE｜VUE前端开发--基本语法_vue前端语句-CSDN博客

本文链接：https://blog.csdn.net/qq_43571150/article/details/103646553

本文详细介绍了Vue的基本语法，包括声明式渲染、条件语句、循环语句，以及处理用户输入、模板语法、计算属性和监听器、事件处理器、双向绑定等内容。此外，还探讨了组件、自定义指令和路由的概念，帮助开发者全面理解Vue的开发流程。

摘要由CSDN通过智能技术生成

VUE｜基本语法

一、声明式渲染

◼ hellovue1.html

<html>
<head><title>HelloWorld!</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
<body>
	<div id="app">{
   {
    message }}</div> 
	<script src="hellovue1.js"></script>
</body> 
</html>

◼ hellovue1.js

var app = new Vue({
    
	el: '#app',
	data:{
   
		message:'HelloVue!'
		}
	});
app.message = 'We changed Hello Vue to Hello World!'

◼ Vuejs起步
在这里插入图片描述
可以看到在Vue构造器中有一个el参数，它是DOM元素中的id。意味着接下来所有改动全部在指定的< div >内。上图中指定的< div >是 app。

◼ 定义数据对象

Data：用于定义属性，图中有book、fruit、drink三个
Methods：用于定义方法，return 可以返回值
{ { }} 用于输出对象属性和函数返回值。

◼ var 和 let 变量

var 是函数级作用域，let是块级作用域
var会发生变量提升，let则不会提升
同一作用域下不能定义相同的let变量

在这里插入图片描述

◼ 绑定元素特性
hellovue3.html

<div id="app-2">
<span v-bind:title="message">
#鼠标悬停几秒钟查看此处动态绑定的提示信息
</span>
</div>
<script src="hellovue3.js"></script>

hellovue3.js

var app2 = new Vue({
   
el: '#app-2',
data:{
   
	message: '页面加载于 ' + new Date().toLocaleString()
	}
})

二、条件语句

◼ V-if

vueif.html

<div id="app-3">
<p v-if="seen">现在你看到我了</p> 
</div>

new Vue({
    
el:'#app-3', 
data:{
   
	seen: true
	}
})

◼ v-if 和 v-else 在这里插入图片描述

◼ v-else-if
在这里插入图片描述
◼ v-show
v-show也是根据条件展示元素

◼ v-show 与 v-if 的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好;如果在运行时条件很少改变，则使用 v-if 较好。

三、循环语句

◼ v-for
（1）v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

Vuefor.html

<div id="app-4"> 
<ol>
<li v-for="todo in todos">
	{
   {
    todo.text }}
</li>
</ol>
</div>

var app4 = new Vue({
   
	el: '#app-4’,
	data: {
    todos: [ { text: ‘Learn JavaScript’ }, { text: ‘Learn Vue’ }, { text: ‘Do a big project' } ] }
 })

在这里插入图片描述

（2）v-for 迭代对象第二个参数为键名
在这里插入图片描述
（3）v-for 迭代对象第三个参数为键名

四、总体架构

◼ 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
    // 选项 })

◼ 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 Data 对象中能找到的所有的属性

当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值
当这些数据改变时，视图会进行重渲染。

◼ 该对象被加入到一个 Vue 实例中

var vm = new Vue({
   data: data}) 
vm.a == data.a // => true
vm.a = 2
data.a // =<

VUE｜VUE前端开发--基本语法

VUE｜基本语法

一、声明式渲染

二、条件语句

三、循环语句

四、 总体架构

四、总体架构