vue 与其他框架的对比
框架 | 设计模式 | 数据绑定 | 灵活度 | 文件模式 | 复杂性 | 学习曲线 | 生态 |
---|---|---|---|---|---|---|---|
Vue | MVVM | 双向 | 灵活 | 单文件 | 小 | 缓 | 完善 |
React | MVC | 单向 | 较灵活 | all in js | 大 | 陡 | 丰富 |
Angular | MVC | 双向 | 固定 | 多文件 | 较大 | 较陡(Typescript) | 独立 |
更多对比细节:vue 官网:https://cn.vuejs.org/v2/guide/comparison.html
Vue 是一个推陈出新的前端框架,吸收了很多前端框架的优点。例如,Vue 借鉴了 React 的组件化和虚拟 DOM ,借鉴了 Angular 的模块化和数据绑定。因此,我们以 Vue.js 作为入手,以后深入学习其他框架,你会发现他们的共通之处,更好地高效地学习。
选择 Vue.js 的更多原因是,就框架的 API 而言,对比之下,Vue 更加轻便简洁。Vue 自身拥有开箱即用的生态开发包(Vuex,Vue-Router)等,复杂性低、学习成本低,是一门比较好入门的前端框架。
如果你刚开始学习前端开发,将框架作为你的第一步可能不是最好的选择,推荐进入实验楼前端基础知识课程。假入你已掌握了关于 HTML
、CSS
和 JavaScript
的中级知识,那让我们进入 Vue 的学习吧!
每个 Vue 应用都是通过用 Vue
函数创建一个新的 Vue 实例 开始的:
var app = new Vue({// 选项
});
vue框架就是很简单的,新手可以在html的head标签里面直接引入一个带有vue连接的script就ok
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统,我们新建一个.html 后缀的文件,输入以下代码,运行(右击文件 > open with > Preview 或 Mini Browser),你就会看到 {{msg}} 被渲染成 hello
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue-test</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><div id="app">{{msg}}</div><script>var app = new Vue({el: "#app", //dom挂载点data: {//数据项msg: "hello syl",},});</script></body>
</html>
运行效果:
说明: el 为实例挂载点,上面表示挂载在 id 为 app 的 dom 元素中。data 选项为数据选项,存放绑定数据。除了这两个之外还有实例选项,methods(实例方法)、computed(计算属性) 等,后面我们会学习到。
双大括号
双大括号 {{ }}
在 Vue.js 中被用作文本插值的语法,这是一种在模板中输出数据到 HTML 的简单方式。当你在 Vue.js 的模板中使用 {{msg}}
时,Vue 会自动将其替换为与其绑定的数据属性 msg
的当前值。
在你给出的例子中:
<input type="text" v-model="msg" />
这行 HTML 代码创建了一个文本输入框,并通过v-model
指令将其值与 Vue 实例的msg
数据属性双向绑定。这意味着,当你在输入框中输入文本时,msg
属性的值会实时更新,反之亦然。<p>{{msg}}</p>
这行 HTML 代码将会在<p>
标签中显示msg
属性的值。当msg
的值发生变化时(比如你在输入框中输入了文本),这个变化会立即反映在<p>
标签中的内容上。
所以,双大括号 {{ }}
内的内容是动态的,并且是响应式的。它不仅仅是简单的文本输入,而是一个数据绑定的表达式,Vue 会监控这个表达式关联的数据属性,一旦属性值发生变化,模板中的内容也会自动更新。
总结来说,双大括号 {{ }}
用于在 Vue 模板中输出 JavaScript 表达式的结果。在 Vue.js 中,它是最基本的数据绑定形式,允许开发者将数据实时渲染到 DOM 中,非常适合构建动态交互的用户界面。
上面的双大括号表达式会将数据解释为普通文本,即使你的数据为 HTML 元素,也不会渲染成对应的标签元素,只能渲染成普通文本,而非 HTML 代码,例子:
<!doctype html>
<html lang="en"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body> <!-- 数据绑定 --> <div id="app"><p>{{msg}}</p></div><script>var app = new Vue({el: "#app", //el: 挂载点data: { //data:数据选项msg: "<h1>hello syl</h1>", //这个标签h1还是会作为h1文本进行输出的},});</script></body>
</html>
tips:
在 Vue.js 中,el
属性指的是“挂载点”,也就是 Vue 实例所要控制的 DOM 元素。这个 DOM 元素作为 Vue 实例的作用范围。在你的代码中,el: "#app"
告诉 Vue 实例要控制的 DOM 元素是页面上 id
为 app
的元素。Vue 实例会管理这个元素及其内部的所有内容。
data
属性是 Vue 实例的一个选项,用于声明所有这个实例要用到的数据。这些数据是响应式的,意味着当这些数据变化时,绑定这些数据的视图也会自动更新。
关于逗号的使用,JavaScript 中的对象由键值对构成,这些键值对就是属性名和它们对应的值。在对象字面量的表示法中,每个键值对之间都用逗号 ,
分隔。例如:
var app = new Vue({el: "#app", // 这里的逗号分隔了 el 和 data 两个不同的属性data: {msg: "<h1>hello syl</h1>",}, // 这里的逗号在实际中不是必需的,因为后面没有紧跟其他属性,但放置逗号是一种常见的做法,便于后续添加新属性
});
在 data
对象内部,如果你有多个属性,它们也会用逗号分隔。逗号是 JavaScript 对象以及许多其他结构(如数组)中分隔元素的标准方式。在实践中,最后一个属性后面的逗号是可选的,但有的开发者喜欢加上它,也可以不加上去,因为这样添加新属性时更方便。这通常被称为“尾逗号”(trailing comma)。
双大括号语法不能作用在 HTML 特性(标签属性)上,需要对标签属性操作,应该使用 v-bind
指令:
<div v-bind:class="syl-vue-course"></div>
HTML 标签属性为布尔特性时,它们的存在表示为 true
,v-bind
工作起来略有不同,在这个例子中:
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 布尔特性绑定--><div id="app"><input type="checkbox" v-bind:checked="isChecked" /></div><script>var app = new Vue({el: "#app",data: {isChecked: false, // isChecked是否选中boolean},});</script></body>
</html>
一些指令能够接收一个“参数”,在指令名称之后以冒号表示。例如,v-bind
指令可以用于响应式地更新 HTML 特性,在这里 href
是参数,告知 v-bind
指令将该元素的 href
特性与表达式 url
的值绑定,例子:
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 参数--><div id="app"><a v-bind:href="url">123</a></div><script>var app = new Vue({el: "#app",data: {url: "https://www.baidu.com",},});</script></body>
</html>
另外一个例子,v-on
指令,用于监听 DOM 事件,例子:
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>syl-vue</title><!-- 通过cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 参数--><div id="app"><p>我叫:{{name}}</p><!-- handleClick 使我们在实例 methods 中写的方法 --><button v-on:click="handleClick">点我</button><p v-bind:class="'col'+colNum">syl</p></div><script>var app = new Vue({el: "#app",data: {name: "实验楼",colNum: "12",},methods: {//实例方法对象handleClick: function () {this.name = this.name.split("").reverse().join("");},},});</script></body>
</html>
在 Vue.js 中,v-bind:class
用于动态地绑定 class
属性。这个指令后面通常跟着一个 JavaScript 表达式。
在你提供的代码中:
<p v-bind:class="'col'+colNum">syl</p>
'col' + colNum
是一个字符串拼接的表达式,它将 'col'
字符串与 colNum
数据属性的值拼接起来。如果 colNum
的值为 "12"
(如你的 Vue 实例中定义的那样),那么这个表达式的结果就是字符串 "col12"
。
这意味着 Vue 会将这个计算后的字符串值绑定到 <p>
元素的 class
属性上。所以,最终渲染到 DOM 上的 HTML 会是这样的:
<p class="col12">syl</p>
这样你就可以根据 colNum
的值来动态地设置 <p>
元素的类名,这在响应式布局框架(如 Bootstrap)中非常有用,其中 col-12
类型的类名用于指定元素在网格系统中占据的列数。如果你改变了 colNum
的值,那么绑定的类名也会相应地改变。
类似的操作在这里:
在 Vue.js 中,除了 v-bind
用于绑定 HTML 特性外,还有许多其他指令和技术可以用来实现不同的动态行为和数据绑定。下面是一些常用的 Vue 指令和它们的用途:
-
v-model:
- 用于在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。
<input v-model="message" placeholder="编辑我...">
-
v-for:
- 用于基于源数据多次渲染一个元素或模板块。可以用于渲染列表。
<ul><li v-for="item in items">{{ item.text }}</li> </ul>
-
v-if / v-else-if / v-else:
- 用于条件渲染一块内容。只有表达式返回真值时才渲染。
<p v-if="seen">现在你看到我了</p>
-
v-show:
- 类似于
v-if
,但是它通过切换 CSS 的display
属性来显示或隐藏元素。
<p v-show="isVisible">你可以看到我吗?</p>
- 类似于
-
v-on:
- 用于监听 DOM 事件,并在触发时执行一些 JavaScript 代码。
<button v-on:click="doSomething">点击我</button>
-
v-slot:
- 用于编写可复用的模板组件,允许子组件内部的内容通过插槽分发。
-
v-pre:
- 跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。
<span v-pre>{{ this will not be compiled }}</span>
-
v-cloak:
- 保持在元素上直到关联实例结束编译。配合 CSS 规则
[v-cloak] { display: none }
可以隐藏未编译的 Mustache 标签直到 Vue 实例准备就绪。
- 保持在元素上直到关联实例结束编译。配合 CSS 规则
-
v-once:
- 执行一次性的插值,当数据改变时,插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
每个指令都有其特定的用例和功能,使 Vue.js 强大而灵活,可以轻松地处理各种动态网页和应用的需求。通过组合使用这些指令,你可以构建出高度交互和响应式的用户界面。