MVVM思想
M:module 包括数据和一些基本操作
V:view 视图,页面渲染结果
VM:View-module,模型与视图间的双向操作(无需开发人员干涉)视图和数据通过VM绑定起来,模型里有变化会自动地通过Directives填写到视图中,视图表单中添加了内容也会自动地通过DOM Listeners保存到模型中。
第一个 Vue 程序
1)、创建 gitee 码云代码仓库
2)、导入 IDEA
3)、记得安装 Vue.js 插件
4)、vue 的安装
直接引入脚本:<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
或者
1 | 1、 初始化项目(初始化项目,生成了一个 package.json 文件,说明他是一个 npm 管理的项目) |
5)、新建一个 index.html 文件
1 |
|
5)、此时页面,已经显示“大牛,你好”。
此时我在控制台修改属性之后,页面变为“二蛋,你好”
这种被称为“单向绑定”:属性动页面跟着动。
“双向绑定”:页面动,属性也跟着动,属性动,页面也跟着动。
双向绑定
1)、代码(使用到了 v-model 双向绑定,属性与表单进行绑定)
1 |
|
2)、其中表单内容变,属性值就变,由属性值映射的也就跟着变。
同样,属性变,表单内容也变,也就跟着变。
事件绑定
1)、绑定属性代码。v-on:事件名称=”属性名称”
1 |
|
2)、点击按钮事件
3)、绑定方法。v-on:事件名称=”方法名()”
1 |
|
4)、点击“取消”
Chrome 插件:Vue.js devtools
或者,你可以百度下载压缩包
2)、可以很明显,查到 vue 属性
花括号,v-text,v-html
1)、花括号
1 | + 格式{{表达式}} |
2)、代码
1 |
|
3)、演示
v-bind
给html标签的属性绑定,”v-bind:属性”,也可以简写为“:属性”
1)、绑定 a 标签 href 属性
1 |
|
2)、点击跳转至百度。
再把属性改为QQ,点击跳转至QQ
3)、测试绑定 class,style 属性。
class,style中属性若有“-”减号,则可以使用单引号,或使用驼峰命名。
1 |
|
4)、修改对应模型层,视图层也会跟着改变。
5)、此时我们修改视图层,但模型层的数据却不会跟着改变。所以称之为“单向绑定”
v-model
双向绑定
1 | # v-model 的可使用的元素 |
1)、代码。
1 |
|
2)、视图层改变,模型层跟着改变。
模型层改变,视图层也会跟着改变。
v-on
1)、v-on 绑定事件,简写 @,可以绑定:js片段,或 vue实例中定义的回调函数
1 |
|
》》》 点击“点赞”,数量+1;点击“取消”,数量-1
2)、事件修饰符
1 | .stop 阻止事件冒泡到父元素 |
》》》给大小 div 都绑定了 hello 事件。
》》》此时点击一次小div,同时也会触发大div,hello方法会被触发两次
1 |
|
》》》此处简写了部分代码
》》》给小div设置“.stop”,表示小div的事件不会传给父div,此时只触发一次小div 的 click事件
1 | <!-- v-on 绑定事件,简写 @--> |
》》》此处简写了部分代码
》》》但此时,点击“去百度”链接,就相当于触发了小div,alert一次之后,就跳转至百度了
》》》可以使用“.prevent”阻止默认跳转行为,只触发一次小div,而不跳转百度
1 | <!-- v-on 绑定事件,简写 @--> |
》》》也可以给“@click.prevent”绑定一个事件,这时会触发两次 hello 方法,a 链接自身一次,小div触发一次。
1 | <!-- v-on 绑定事件,简写 @--> |
》》》也可以,给 a链接设置一个“.stop”,此时点击 a链接也就只会触发一次 a链接的hello方法,而不会传递给小div,大div
1 | <!-- v-on 绑定事件,简写 @--> |
》》》也可以给大 div设置“.once”,无论点击多少次大 div,只有第一次能触发 hello方法。
1 | <!-- v-on 绑定事件,简写 @--> |
3)、按键修饰符
1 | 事件类型,对应键盘字母 |
1 |
|
v-for
三种格式
1 | # 集合 |
1 |
|
v-if,v-show
v-if:元素不可以审查元素看到,
v-show:元素可以审查元素看到,只是“display:none”
1 |
|
v-else-if,v-else
1 |
|
计算属性、监听器
1 |
|
过滤器
下面演示,全局过滤器,局部过滤器。使用 “|” 管道符来使用过滤器。
1 |
|
组件化
》》》方便重复利用。例如:导航栏,侧边栏,底边栏,等 …
1 |
|
生命周期:钩子函数
1 |
|
Vue 模块化开发
1)、创建 gitee 代码仓库,方便代码上传
2)、导入 git 项目
3)、解决:'vue' 不是内部或外部命令,也不是可运行的程序或批处理文件。
1 | npm -g uninstall vue-cli |
4)、项目初始化
1 |
|
)
5)、启动项目
1 | cd vue-demo |
整合 ElementUI
2021-01-26 17:21:33
2)、安装npm -s install element-ui
3)、省略。。。可以参考之前的。