文章时效性提示
这是一篇发布于 1150 天前的文章,部分信息可能已发生改变,请注意甄别。
理所当然的开始学框架,vue3.x
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
使用
还是三种方法
下载文件本地用,CDN和npm
然后需要脚手架. vue-cli
使用
1 | npm i -g @vue/cli |
官方命令行工具,可用于快速搭建大型单页应用
开始项目
这样就开始
1 | vue init webpack projectname |
然后会进行一系列配置,现在可以都选no,后面再改.
然后进入项目
1 | npm run dev |
会在8080端口开启服务,注意也可以对配置文件进行修改换端口.
这是开始一个vue项目.通过vue这个命令行对于构建vue项目有很多帮助.
当然也可以不用,直接引入vue.js即可.同时菜鸟教程推荐了Vite工具使用npm下载
MVVM模式
M:Model 即数据逻辑处理
V:View 即视图(用户界面)
VM:ViewModel 即数据视图,用于监听更新,View 与 Model 数据的双向绑定
所以,Vue 一大特点就是数据双向绑定,另一大特点就是响应式.
1 | <!DOCTYPE html> |
模板语法
允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析,通俗的讲 Vue 模板语法就是在使用 Vue.js 开发时,你可以写在 HTML 元素上的操作语法,让你开发更高效,例如:绑定样式,循环出元素列表等。
1 | const app = { |
mount用于挂载
data是一个函数,应该返回一个对象,$data形式存储在组件实例中
- 双大括号
1 | {{}} |
通过使用 v-once
指令你也能执行一次性地插值,当数据 改变时,插值处的内容 不会更新。但是需要注意一下,该元素节点下面其他数据的绑定,数据改变,内容也不会更新,所以,注意代码块的划分
v-html
渲染为html
3.v-bind 渲染属性
4.v-on 监听事件
5.v-model
v-model就是vue的双向绑定的指令,能将页面上控件输入的值同步更新到相关绑定的data属性,也会在更新data绑定属性时候,更新页面上输入控件的值
v-if等指令
methods
组件中添加方法,使用 methods 选项,该选项包含了所需方法的对象
参数
1 | <!-- 完整语法 --> |
修饰符
- 事件修饰符
- 按键修饰符
- 系统修饰符
修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定
v-bind与v-on简写
1 | <a :href=""></a> |
1 | <!-- 完整语法 --> |
v-if
v-else
v-else-if
v-show
计算属性
1 | computed:{ |
惰性
侦听属性
watch关键字
1 | watch:{ |
过滤器
在 Vue 中我们有一个专门处理数据过滤的东西:过滤器。过滤器可以用在两个地方:双花括号插值和 v-bind 表达式
1 | <p>{{msg2|getString}}</p> |
1 | <div id = "app"> |
class与style的绑定
1.给 v-bind:class
一个对象,以动态地切换 class
1 | <div :class="{ 'active': isActive }"></div> |
同时还有数组绑定法
2.我们可以把一个数组传给 v-bind:class
1 | <div class="static" :class="[activeClass, errorClass]"></div> |
style的绑定方法,同时也有数组与对象的方法.
1 | <div id="app"> |
1 | div id="app"> |
还有很多东西,应该可以看了官方文档.后面直接实战算了.
更新
鸽了太久了…