JS 的另一种框架 vue 框架
Vue 框架的的概述
1. 什么是 MVVM
Vue 框架之中与我们之前学的框架不同, 它是将一个 html 划分为了
以下三个部分
View: 视图部分, 含有 HTML 的各种标签和样式
Model: 模型部分有叫做数据部分
ViewModel: 将数据与标签结合起来 (就是决定将数据放在哪一块的 HTML 的标签上)
2. 响应式的框架
Vue 的框架有一个特点就是响应式的框架, 就是它将数据与标签连接在一起, 如果标签上的数据发生变化的话就会造成相应的标签发生变化, 这就是一种响应式框架
举例:
- {
- {
- name
- }
- }
- {
- {
- age+1
- }
- }
- <script> var vue=new Vue({
- //el: 就是将视图与数据连接在一起 el:"#hello", //data 就是模型数据 data:{
- name:"张三", age:10
- }
- }); </script>
此时如果在浏览器的控制台上添加如下的代码
vue.name="李四";
当按下回车的时候页面上的 == 张三 == 就会立刻改为 == 李四 ==
将标签与数据绑定时注意:
(1) 一定要将统一的父标签与子 Vue 的对象进行绑定
(2) 不要将 Vue 的对象与
与进行绑定, 建议的是
标签
Vue 的计算的属性
可在 {{}} 里面进行一些简单的计算
- JavaScript
- {
- {
- name.split("").reverse().join("")
- }
- }
- // 对那么进行了反转
但是如果在标签里进行计算的话总会有些不合适, 就会失去了 MVVM 思想的初衷, 没有将数据可 HTML 标签完全的分开, 所以 Vue 对象中还有一个 computed 的计算属性
- //Vue 对象的计算属性
- computed:{
- namereverse:function () {
- return this.name.split("").reverse().join("");
- }
- }
v-for 指令
v-for 指令可以用来循环的插入一个 data 中的数据
举例: 在一个表格循环的插入数据
循环的一般的格式为
==v-for="(p,i) in list==
姓名 | 年龄 |
---|---|
{{p.name}} | {{p.age}} |
<script> var vue=new Vue({ el:"#hello", data:{ list:[ {name:"张三",age:10}, {name:"李四",age:20}, {name:"王五",age:30} ] } }); </script>
v-if 的指令
v-if 的指令就是判断是否符合条件, 如果符合的话就会显示, 如果不符合的话就不会显示
注意 v-if 的语句中没有 else 的语句, 所以每次都需要调用一次 v-if 的语句
一般的格式为
v-if="成立的条件"
举例: 如下如果我想达到一个效果: 就是 data 里面有数据的时候就会显示我所需要的表格, 但是如果 data 里面没有数据的话就不会显示这个表
以下是代码
姓名 | 年龄 |
---|---|
{{p.name}} | {{p.age}} |
此时没有数据
- <script>
- var vue = new Vue({
- el: "#hello",
- data: {
- list: [ // {name:"张三",age:10}, // {name:"李四",age:20}, // {name:"王五",age:30} ] } });
- </script>
- v-bind(属性的绑定)
属性的绑定就是将 Vue 对象里面的数据与之前的标签的属性连接起来, 如果 Vue 对象的数据发生变化的话就会相应的控制对应绑定的标签的属性
一般的格式为
==v-bind: 属性名 ="属性的值"==
另一种简写的个格式为
==: 属性名 ="属性的值"==;
举例
<script> var vue=new Vue({ el:"#p1", data:{ val:"hello world" } }); </script>
如下所示的代码就是将一个文本框的 value 的属性与 data 里面 val 相互绑定了起来
如果对应的 val 的变化就会引起文本框的值发生变化
例如在一个浏览器的控制台写入以下的代码:
vue.val="你好, 世界";
那么文本框的值也会发生变化
事件的处理 (v-on)
举例:
- <script src="vue.js">
- </script>
- <script>
- var vue = new Vue({
- el: "#p",
- data: {},
- methods: {
- abc: function() {
- console.log("100");
- }
- }
- });
v-bind 与 v-model 的区别
v-bind: 只能是数据来影响模型
v-model: 既可以数据影响模型, 也可以是模型来影像数据 (又叫做双向的绑定)
</script>
来源: https://www.2cto.com/kf/201809/778477.html