四平网站建设在线咨询,php网页模板,陕西网站建设电话,上海网站建设方案咨询vue 与其他框架的对比
框架设计模式数据绑定灵活度文件模式复杂性学习曲线生态VueMVVM双向灵活单文件小缓完善ReactMVC单向较灵活all in js大陡丰富AngularMVC双向固定多文件较大较陡#xff08;Typescript#xff09;独立
更多对比细节#xff1a;vue 官网#xff1a;ht…vue 与其他框架的对比
框架设计模式数据绑定灵活度文件模式复杂性学习曲线生态VueMVVM双向灵活单文件小缓完善ReactMVC单向较灵活all in js大陡丰富AngularMVC双向固定多文件较大较陡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 langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue-test/title!-- 通过cdn方式引入 vue.js --script srchttps://labfile.oss.aliyuncs.com/courses/1262/vue.min.js/script/headbodydiv idapp{{msg}}/divscriptvar 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 typetext v-modelmsg / 这行 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 langen headmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue/title!-- 通过cdn方式引入 vue.js --script srchttps://labfile.oss.aliyuncs.com/courses/1262/vue.min.js/script/headbody !-- 数据绑定 -- div idappp{{msg}}/p/divscriptvar app new Vue({el: #app, //el: 挂载点data: { //data:数据选项msg: h1hello syl/h1, //这个标签h1还是会作为h1文本进行输出的},});/script/body
/htmltips
在 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: h1hello syl/h1,}, // 这里的逗号在实际中不是必需的因为后面没有紧跟其他属性但放置逗号是一种常见的做法便于后续添加新属性
});在 data 对象内部如果你有多个属性它们也会用逗号分隔。逗号是 JavaScript 对象以及许多其他结构如数组中分隔元素的标准方式。在实践中最后一个属性后面的逗号是可选的但有的开发者喜欢加上它也可以不加上去因为这样添加新属性时更方便。这通常被称为“尾逗号”trailing comma。
双大括号语法不能作用在 HTML 特性标签属性上需要对标签属性操作应该使用 v-bind 指令
div v-bind:classsyl-vue-course/divHTML 标签属性为布尔特性时它们的存在表示为 truev-bind 工作起来略有不同在这个例子中
!doctype html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue/title!-- 通过cdn方式引入 vue.js --script srchttps://labfile.oss.aliyuncs.com/courses/1262/vue.min.js/script/headbody!-- 布尔特性绑定--div idappinput typecheckbox v-bind:checkedisChecked //divscriptvar app new Vue({el: #app,data: {isChecked: false, // isChecked是否选中boolean},});/script/body
/html一些指令能够接收一个“参数”在指令名称之后以冒号表示。例如v-bind 指令可以用于响应式地更新 HTML 特性在这里 href 是参数告知 v-bind 指令将该元素的 href 特性与表达式 url 的值绑定例子
!doctype html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue/title!-- 通过cdn方式引入 vue.js --script srchttps://labfile.oss.aliyuncs.com/courses/1262/vue.min.js/script/headbody!-- 指令 参数--div idappa v-bind:hrefurl123/a/divscriptvar app new Vue({el: #app,data: {url: https://www.baidu.com,},});/script/body
/html另外一个例子v-on 指令用于监听 DOM 事件例子
!doctype html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /meta http-equivX-UA-Compatible contentieedge /titlesyl-vue/title!-- 通过cdn方式引入 vue.js --script srchttps://labfile.oss.aliyuncs.com/courses/1262/vue.min.js/script/headbody!-- 指令 参数--div idappp我叫{{name}}/p!-- handleClick 使我们在实例 methods 中写的方法 --button v-on:clickhandleClick点我/buttonp v-bind:classcolcolNumsyl/p/divscriptvar 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:classcolcolNumsyl/pcol colNum 是一个字符串拼接的表达式它将 col 字符串与 colNum 数据属性的值拼接起来。如果 colNum 的值为 12如你的 Vue 实例中定义的那样那么这个表达式的结果就是字符串 col12。
这意味着 Vue 会将这个计算后的字符串值绑定到 p 元素的 class 属性上。所以最终渲染到 DOM 上的 HTML 会是这样的
p classcol12syl/p这样你就可以根据 colNum 的值来动态地设置 p 元素的类名这在响应式布局框架如 Bootstrap中非常有用其中 col-12 类型的类名用于指定元素在网格系统中占据的列数。如果你改变了 colNum 的值那么绑定的类名也会相应地改变。
类似的操作在这里
在 Vue.js 中除了 v-bind 用于绑定 HTML 特性外还有许多其他指令和技术可以用来实现不同的动态行为和数据绑定。下面是一些常用的 Vue 指令和它们的用途 v-model 用于在表单元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。 input v-modelmessage placeholder编辑我...v-for 用于基于源数据多次渲染一个元素或模板块。可以用于渲染列表。 ulli v-foritem in items{{ item.text }}/li
/ulv-if / v-else-if / v-else 用于条件渲染一块内容。只有表达式返回真值时才渲染。 p v-ifseen现在你看到我了/pv-show 类似于 v-if但是它通过切换 CSS 的 display 属性来显示或隐藏元素。 p v-showisVisible你可以看到我吗/pv-on 用于监听 DOM 事件并在触发时执行一些 JavaScript 代码。 button v-on:clickdoSomething点击我/buttonv-slot 用于编写可复用的模板组件允许子组件内部的内容通过插槽分发。 v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始的 Mustache 标签。 span v-pre{{ this will not be compiled }}/spanv-cloak 保持在元素上直到关联实例结束编译。配合 CSS 规则 [v-cloak] { display: none } 可以隐藏未编译的 Mustache 标签直到 Vue 实例准备就绪。 v-once 执行一次性的插值当数据改变时插值处的内容不会更新。 span v-once这个将不会改变: {{ msg }}/span每个指令都有其特定的用例和功能使 Vue.js 强大而灵活可以轻松地处理各种动态网页和应用的需求。通过组合使用这些指令你可以构建出高度交互和响应式的用户界面。
