Vue第一天

最新推荐文章于 2024-10-01 18:51:18 发布
最新推荐文章于 2024-10-01 18:51:18 发布
阅读量52 收藏
点赞数
文章标签： vue java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44905274/article/details/103749869
版权

1.MVVM

1.什么是MVVM:

MVC : model(模型) view(视图) controll(控制器)

MVVM : model view view-model -->数据的双向绑定

2.ES6语法

语法一

let相较于var，他是块级的。也就是局部的

for (var i=0;i<5;i++){
    console.log(i);
}
console.log("==========");
console.log(i);
console.log("=======");
for (let j=0;j<5;j++){
    console.log(j);
}
console.log("=========");
console.log(j);

语法二

const 一旦有值就不能修改(掌握)
下面这样就会报错

const a=11;
console.log(a);
const a = 12;
console.log(a);

语法三

解构表达式(掌握)

数组解构

var arr=[1,2,3]
var [a1,a2,a3]=arr;
console.log(a1);
console.log(a2);
console.log(a3);

对象解构

var obj={"name":"呵呵","age":"123"}
var {name,age}=obj;
console.log(name);
console.log(age);

语法四

箭头函数（掌握）

function say() {
    console.log("aaaaaaa")
 }
 var obj= {

     hah: (obj) => {
         console.log("哈哈哈哈哈哈"+obj)
     }
 }
say();
 obj.hah("嗝")

箭头+解构一起

var say=({name})=>console.log("我是"+name);
var obj={
    name:"你猜"
}
say(obj);

3.vue

1.什么是vue

(1)Vue是构建界面的渐进式的js框架

(2)只关注视图层， 采用自底向上增量开发的设计。

(3)Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 --数据双向绑定
      一句话:vue就是做界面的js框架 (jquery/easyui)

2.vue怎么使用

(1)在项目里面 运行 npm install vue
在这里插入图片描述(2)在页面引入vue.js

<script type="text/javascript" src="node_modules/vue/dist/vue.js"></script>

(3)测试代码

<body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

3.el挂载

el:挂载,把vue这个对象el方式:

​ (1)id的方式进行挂载 挂载到对应的标签上面去

       <body>
    <div id="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:"#app",
        data:{
           name:"xxxx"
        }
    });
</script>

(2) class方法进行挂载

<body>
    <div class="app">
        {{name}}
    </div>
<script>
    new Vue({
       el:".app",
        data:{
           name:"xxxx"
        }
    });
</script>

4.data数据

data:放字符串 对象 和数组 都可以

  data:{
            name:"aaaaa",
            user:{
                name:"名字",
                age:"年龄",
                hobby:["爱好1","爱好二"]
            }

5.methods方法

这里面放方法

methods:{
            say(obj){
                console.log("你在说"+obj)
            },
            run(obj){
                console.log("你又在跑"+obj)
            }

6.Vue生命周期

vue对象 从出生 到死亡 经过这个过程 就叫生命周期

vue生命周期里面钩子方法:

created:(掌握)
	表示创建完vue对象的时候,执行内容
mounted:(掌握) -- window.onload
	 表示页面所有的内容 加载完之后,执行内容

<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"aaaaa",
            user:{
                name:"名字",
                age:"年龄",
                hobby:["爱好1","爱好二"]
            }
        },methods:{
            say(obj){
                console.log("你在说"+obj)
            },
            run(obj){
                console.log("你又在跑"+obj)
            }
        },
        created(){
            console.log("我是Vue创建完就执行的")
        },
        mounted(){
          console.log("我是渲染完毕后执行的")
        }
    });
    //修改内容
    app.user.name="改了"
    app.run("不跑")
    app.say("杀");

</script>

钩子环节
 created创建对象 --> 渲染标签内容  -- >mounted挂载完 -->destory销毁
 重点:
 created  / mounted

7.数据的双向绑定

 v-model:双向绑定

<div id="app">
  <input type="text" v-model="msg" v-on:change="changeData">
    {{msg}}
</div>
<script>
    var app=new Vue({
        el:"#app",
        data: {
            msg: "test"
        },methods:{
            changeData(){
                console.log(this.msg)
            }
        }
        });
</script>

4.Vue指令

1.v-text/v-html

v-text不会解析html格式
v-html会解析

<div id="app">
    <span v-text="name"></span>
    <span v-text="user.name"></span>
    <span v-html="user.name"></span>
</div>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            name:"<h1>不知道</h1>",
            user:{
                name:"<h2>你猜</h2>"
            }
        }
    })
</script>

2.v-for

循环数组

  <ul>
        <li v-for="hobby in hobbys">
            {{hobby}}
        </li>
    </ul>

 data:{
            hobbys:["唱","跳","rap","打篮球"],
      }

循环对象

 <ul>
        <li v-for="users in user">
            {{user}}
        </li>
    </ul>

data:{
  user:{
                name:"疯子",
                hobby:"大人"
            },
     }

带索引循环数组

 <ul>
        <li v-for="(hobby,index) in hobbys">
            {{hobby}}====={{index}}
        </li>
    </ul>

 data:{
            hobbys:["唱","跳","rap","打篮球"],
      }

循环对象value key index

 <ul>
        <li v-for="(users,key,index) in user">
            {{users}}====={{key}}====={{index}}
        </li>
    </ul>

data:{
  user:{
                name:"疯子",
                hobby:"大人"
            },
     }

循环json数据

<table>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>age</th>
            <th>sex</th>
        </tr>
        <tr v-for="student in students">
            <td>{{student.id}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.sex}}</td>

        </tr>
    </table>

data:{
  students:[{"id":1,"name":"第一","age":25,"sex":"男"},
                {"id":2,"name":"第二","age":25,"sex":"女"},
                {"id":3,"name":"第三","age":25,"sex":"男"}]
     }

3.v-bind

绑定的标签里面属性的值,主要是改变属性得值

<div id="app">
    <!-- v-bind可以绑定标签里面的属性的值 比如src title-->
    <img src="image/6.jpg"><br>
    <img v-bind:src="imagSrc">
    <img :src="imagSrc">
    <input v-bind="props">
</div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            imagSrc:"image/6.jpg",
            props:{
                type:"text",
                name:"username"
            }
        }
    })
</script>

4.v-model

控制 标签的value值 完成双向绑定和v-bind是不同的

绑定普通的字符串值

 <input v-model="inputValue">
    {{inputValue}}

 data:{
            inputValue:"这是一个文本",
      }

绑定到type=checkbox的input表单元素,这里设置值有点不同

  打代码:<input type="checkbox" v-model="checkboxValue" value="打代码">
    睡觉:<input type="checkbox" v-model="checkboxValue" value="睡觉">
    {{checkboxValue}}

data:{
 checkboxValue:["睡觉"],
 }

绑定到type=radio的input表单元素

    打代码:<input type="radio" v-model="radioValue" value="打代码">
    睡觉:<input type="radio" v-model="radioValue" value="睡觉"><br>
    {{radioValue}}

data:{
  radioValue:"打代码",
  }

绑定到文本域的值

<textarea v-model="textValue"></textarea>
    {{textValue}}

ata:{
  textValue:"文本域"
  }

下拉的值

 <select v-model="selectValue">
        <option value="打代码">打代码</option>
        <option value="睡觉">睡觉</option>
        <option value="万一游戏">万一游戏</option>
    </select>
    {{selectValue}}

ata:{
   selectValue:"打代码"
  }

5.v-show

是靠控制display这个属性实现得

 <div id="app">
        <a v-show="show">你能到我？</a>
        <a v-show="hidden">你能到我？</a>
        <a v-show="score=90">你能到我？</a>
    </div>
     <script>
         new Vue({
             el:"#app",
             data:{
                 "show":true,
                 "hidden":false,
                 "score":90,
             }
         })
     </script>

6.v-if/v-else/v-if-elseif

如果不成立 ,在页面无法看到

<div id="app">
    <div v-if="age<18">你可以看到这里</div>


    <div v-if="age<18">你可以看到这里</div>
    <div v-else="age>18">你不能看到那里倒是你可以看到更刺激的</div>

    <div v-if="age<18">你可以看到这里</div>
    <div v-else-if="age>18&&age<60">你不能看到那里倒是你可以看到更刺激的</div>
    <div v-else>差不多看点绿色的了</div>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            age:66,
        }
    })
</script>
weixin_44905274
关注
vue第一天的自白
东方佑
01-04 2万+
Vue.js - Day1 课程介绍 前5天： 都在学习Vue基本的语法和概念；打包工具 Webpack , Gulp 后5天： 以项目驱动教学； 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，...
学习vue第一天
2303_82176667的博客
07-24 1040
data(){return{count:0
Vue 第一天
越是憧憬，越要风雨兼程
10-09 1万+
vue 第一天 环境安装 下载安装nodejs 官网下载地址：nodejs下载 安装过程一直点下一步即可 安装淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 安装webpack cnpm install webpack -g 安装vue脚手架 npm install ...
Vue入门--第一天
weixin_44809439的博客
11-09 1242
构造选项 搞清楚Vue实例 const vm = new Vue(options) 这个实例更具你的选项（options）得出一个对象vm 这个vm就是封装了这个DOM对象，以及对这个DOM对象的所有操作（和jQuery类似）操作有（事件绑定，数据绑定，DOM更新） 对象.__proto__ = 其构造函数.prototype 任何一个对象的原型 = 其构造函数.prototype 所以vm.__proto__ = Vue.prototype Vue.__proto__ = Function.prototy
Vue3学习笔记第一天
Word_seeker的博客
08-07 1950
Vue是一种用于构建用户界面的JavaScript框架。MVVM 是Vue采用的一种软件架构模式，用于构建交互式的用户界面。）：模型代表应用程序的数据和业务逻辑。在MVVM模式中，模型通常不直接与视图交互，而是由ViewModel层进行中介。视图是用户直接与之交互的界面。它通常是用户界面的可视化部分，如网页中的HTML页面或移动应用中的屏幕。视图模型是视图的抽象层，它负责处理视图的展示逻辑和用户交互。视图模型通常包含了视图所需的数据和命令，并且负责向视图暴露方法和属性。
Vue入门第一天
caozhisanguo的专栏
01-11 2122
Vue入门学习
学习Vue的第一天
xj1216wt的博客
03-10 831
学习Vue的第一天啦！
一天入门Vue2
qq_46198929的博客
07-03 1624
介绍Vue
vue3一天内快速学习
abcnull 的博客
03-19 1191
最流行的前端框架之一，本篇博文期望快速阅览 vue3 的知识点，1 天内看完，剩下就是熟练加综合应用了npm 是包管理工具，相当于可以用它从中央仓库中拿到依赖包node.js 实际上就是 js 的运行环境其实就是子组件 script 脚本中如果通过 $emit 给某个 key 赋值 value，然后在父组件中就能自定一个事件，这个事件就是@key，然后函数名中的(data)就是反向传过来的 value 了看栗子，子组件foo() {
第一天：初学Vue
热门推荐
silence_ox的博客
02-14 2万+
1、Vuejs的特点 Vue是一个渐进式的框架，渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统，比如Core+Vue-route+Vuex，也可以满足你各种各样的需求。 Vuejs有以下特点： 1、解耦视图和数据 2、可复用的组件 3、前端路由技术 4、状态管理 5、虚拟DOM 2、Vuejs的安装 方式一：直接CDN引入 你可以选择引入开发环境版本还是生产环境版本 <!--开发环境版本，包含了
Vue第一天.xmind
08-26
6.v-once:只渲染元素和组件一次 v-model基本使用： 1.v-model的数据双向绑定 2.视图发生变化，数据也跟着变化 事件的基本使用： 1.简写形式 v-on可以简写为@ 2.当不传递参数的时候加不加括号都一样 3.传递...
Vue第一天学习笔记.txt
09-07
click函数定义在Vue实例 methods里面 调用函数方法形式:函数名:function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算...
VUE第一天笔记
Honoi的博客
11-12 427
Vue.js - Day1 课程介绍 前5天： 都在学习Vue基本的语法和概念；打包工具 Webpack , Gulp 后5天： 以项目驱动教学； 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和An...
JavaScript ArrayBuffer的读写与类型转换
最新发布
白瑕 的博客
10-01 411
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
Spring Cloud全解析：服务调用之OpenFeign集成OkHttp
Lxn2zh的博客
09-30 746
HTTP连接需要进行TCP三次握手，是一个比较耗时的操作，一般我们不直接使用HttpURLConnection，而是使用HttpClient/okHttp等支持连接池的客户端工具，以Feign集成OkHttp为例。OpenFeign本质是HTTP来进行服务调用的，也就是需要集成一个Http客户端。默认是HttpURLConnection方式，也就是jdk中提供的最原始的那个。要开启OkHttp ,还需要在YML 中添加开启配置项，默认是关闭的。使用的是Client接口来进行请求的。
spring-boot 整合 mybatis
m0_72168501的博客
09-29 514
spring boot 整合 mybatis
Java内存布局
阿呆的专栏
10-01 787
64位 JVM 不启用指针压缩时：Object Header 大小是16字节。64位 JVM 启用指针压缩时（默认）：Object Header 大小是12字节。32位 JVM：Object Header 大小是8字节。JVM在默认情况下启用指针压缩，但如果堆内存超过32GB，就会禁用指针压缩。32GB是压缩指针的最大寻址范围。超过32GB的堆内存中，压缩指针带来的性能提升并不显著，而且需要解压指针反而可能增加开销。
【开源免费】基于SpringBoot+Vue.JS校园资料分享平台（JAVA毕业设计）
customer08的博客
09-30 1192
校园资料分享平台是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得校园资料分享平台管理工作系统化、规范化。
C#基础：掌握控制流语句，构建灵活的程序逻辑
学习和分享
09-28 320
在C#中，控制流语句是用来控制程序执行流程的重要部分。它们允许你根据条件执行不同的代码块，或者重复执行某些代码块直到满足特定条件。
vue 获取当月第一天
07-15
你可以使用 JavaScript 的 Date 对象来获取当月的第一天。以下是一个使用 Vue 的示例代码： ```javascript // 在 Vue 组件中的某个方法中 getFirstDayOfMonth() { const now = new Date(); const firstDay = new ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值