0
0

Vue学习-Vue入门

Vue学习

一、Vue入门

1、 引入Vue

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

  使用Vue有多种方式，我们入门阶段就使用下面的方式即可。

<!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2、创建Vue实例

  在下面，我们创建了一个Vue实例，el用于指定当前Vue为哪个容器服务，有三种方式指代分别是id选择器，class选择器和标签选择器（不能是html和body）；data用于定义数据，数据供el所指定的容器去使用，可以写成对象和函数式；methods由于定义函数。

<script>//创建一个Vue对象var app=newVue({//el用于指定当前Vue为哪个容器服务，值通常为css选择器字符串el:'#app',//id选择器，也就是<div id="app">// el:'.app',//class选择器//el:'div',//标签选择器（不能是heml和body)//data中用于定义数据，数据供el所指定的容器去使用，值可以写成对象和函数式//对象data:{msg:"Hello World!"},/*函数式
        data:{
            msg:"Hello World!"
        },*///函数methods:{show:function(){alert(this.msg)}}})</script>

3、使用Vue

  在这里，我们使用插值语法来显示上面data中所定义的数据msg的内容。

插值表达式语法
{{ 变量名/对象.属性名 }}

<divclass="app"><!--插值语法-->
    {{msg}}
</div>

二、 Vue指令

1、显示文本和HTML

v-text  //将数据解释为普通文本
v-html  //如果是普通文本，则和v-text一样；如果是HTML，将数据解释为HTML
v-once //执行一次性地插值，当数据改变时，插值处的内容不会更新。

  在下面，我们不仅显示了data中数据msg的值，还有一个新的数据ht和firstM。在这里我们注意一下，如果ht是一段HTML代码（如

<h2> Hello World!</h2>

），那么v-html最终会将ht解释为HTML并显示Hello World!；对于v-once，它只会显示firstM最初的值，如果firstM发生改变，v-once所处的标签内容不会更新。

<divid="app"><h2v-text="msg"></h2><h3>你好{{msg}}</h3><spanv-html="ht"></span><inputtype="text"v-model:value="ht"><spanv-once="firstM"></span></div>

2、为元素绑定事件

  下面给出的是事件的完整写法和简写，值得注意的是，在methods的函数中，我们可以通过this.数据名的方式使用和修改数据。

v-on:click      //单击事件
v-on:mouseenter //鼠标移入事件
v-on:dblclick   //双击事件

可以简写成
@click      //单击事件简写
@mouseenter //鼠标移入事件
@dblclick   //双击事件

改变数据
this.数据名="???"

  能学习Vue的都是有前端三剑客的基础的，下面就不过多赘述了。

<body><divid="app"><inputtype="button"value="单击事件"v-on:click="v_on"></input><inputtype="button"value="单击事件简写"@click="update"></input><inputtype="button"value="鼠标移入事件"@mouseenter="v_on"></input><inputtype="button"value="双击事件"@dblclick="v_on"></input></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=newVue({el:'#app',//id选择器// el:'.app',//class选择器// el:'div',//标签选择器（除了html和body）data:{msg:"生命是什么？"},methods:{v_on:function(){alert(this.msg)},update:function(){if(this.msg==="已改变"){this.msg="生命是什么？"}else{this.msg="已改变"}this.v_on()}}})</script></body>

3、控制元素的显示和隐藏

  v-show和v-if的区别是，v-show在表达式为假时按F12检查代码其所在标签是存在的，而v-if所在的标签不存在。

//根据表达值的真假来切换元素的显示和隐藏
v-show  //代码一直在

v-if//表达式为假，代码直接不存在
v-else-if
v-else

  下面代码是通过button的点击事件控制v-if和v-show的表达式的真假，以达到控制Hello World!的显示。

<divid="app"><inputtype="button"value="切换"@click="show"><br><spanv-if="flag">Hello World!</span><br/><spanv-show="flag">Hello World!</span></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=newVue({el:"#app",data:{flag:true},methods:{show:function(){this.flag=!this.flag
            }}})</script></body>

4、设置元素的属性

v-bin   //设置元素的属性（比如src,title,class）

v-bin:src="???"
v-bin:title="???"
v-bin:class="???"

简写
:src="???":title="???":class="???"

5、列表显示v-for

  代码中都有注释，这里就不过多赘述了。

<divid="app"><ul><!-- arr为数组或对象，item为其中的每一项，index为索引值，从零开始 --><liv-for="(item,index) in arr">
            第{{index}}位是{{item}}
        </li></ul><h2v-for="(item,index) in str"v-bind:title="item.name">
        第{{index}}位是{{item.name}}
    </h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=newVue({el:"#app",data:{arr:[1,2,3,4,5],str:[{name:"1"},{name:"2"},{name:"3"},]},methods:{show:function(){}}})</script>

6、v-on补充

<!--传递自定义参数，事件修饰符--><inputtype="button"value="点击"@click="doIt(444,'你好')"><inputtype="text"@keyup="doIt(555,'你吃了吗？')"><inputtype="text"@keyup.enter="doIt(666,'你吃了吗？')">    //回车触发

7、v-model

  v-model可以实现数据双向绑定，通过下面的代码可以知道，当在输入框中输入数据并按下回车，msg中的数据会变成你输入的内容。

v-model //获取和设置表单元素的值（双向数据绑定）

<!--改变输入框的值，数据msg的值也会同时变化--><divid="app"><inputtype="text"v-model="msg"@keyup.enter="show"><br>
  {{msg}}
</div>

8、常用内置指令

1. v-text : 更新元素的 textContent
2. v-html : 更新元素的 innerHTML
3. v-if: 如果为 true, 当前标签才会输出到页面
4. v-else: 如果为 false, 当前标签才会输出到页面
5. v-show : 通过控制 display 样式来控制显示/隐藏
6. v-for: 遍历数组/对象
7. v-on : 绑定事件监听, 一般简写为@8. v-bind : 绑定解析表达式, 可以省略 v-bind
9. v-model : 双向数据绑定
10. v-cloak : 防止闪现, 与 css 配合:[v-cloak]{ display: none }

9、自定义指令

  在上面我们都是在使用Vue提供的指令，这些指令可以实现的功能有很多。但是，有些时候这些指令不能实现我们所需的功能时，我们可以自己定义指令。有下列两种方式。

1）、 注册全局指令

//第一个参数是指令的名字（不需要写上v-前缀）
//第二个参数可以是对象数据，也可以是一个指令函数
Vue.directive('my-directive',function(el, binding){
el.innerHTML = binding.value.toupperCase()})

2）、注册局部指令

directives :{'my-directive':{
        bind (el, binding){
            el.innerHTML = binding.value.toupperCase()}}}

3）、使用指令

  自定义指令的使用方式和内置指令是差不多的。

v-my-directive='xxx'

三、 简单学习axios

引入axios

1、简介

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

2、引入

  我们可以通过下列方式引用。

<!--引入axios--><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script>

3、get请求和post请求

  在这里，我们先学习一下axios的其中两个请求get和post。两者的简单区别是get中的所有信息都在地址栏url中，而post的信息在请求体中。
下面为两种请求的写法

<!--发送get请求--><!--第一个参数为url，后可以加？和&接多个数据-->
    axios.get("https://autumnfish.cn/api/joke/list?num=3")
    .then(function(response){//回调函数，变量response为返回的数据
      console.log(response)},function(error){
      console.log(error)})<!--发送post请求--><!--第一个参数为url，第二个参数为数据-->
    axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"})
            .then(function(response){
              console.log(response)},function(error){
              console.log(error)})

4、完整写法

<divid="app"><inputtype="button"value="get"class="get"><inputtype="button"value="post"class="post"></div><!--引入axios--><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script><!--发送get请求--><script>
  document.querySelector(".get").onclick=function(){
    axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response){//回调函数，变量response为返回的数据
      console.log(response)},function(error){
      console.log(error)})}<!--发送post请求-->
  document.querySelector(".post").onclick=function(){
    axios.post("https://autumnfish.cn/api/user/reg",{username:"jack"}).then(function(response){
              console.log(response)},function(error){
              console.log(error)})}</script>

四、 小案例

Vue小案例-计数器

<!--
学习vue
实现计数器

--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue-04</title></head><body><divid="app"><inputtype="button"value="增加"@click="add">{{num}}
    <inputtype="button"value="减小"@click="sub"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>var app=newVue({el:"#app",data:{num:1},methods:{add:function(){if(this.num>=10){alert("再加就到头了")}else{this.num++}},sub:function(){if(this.num==1){alert("你触碰到我的底线了")}else{this.num--;}}}})</script></body></html>

axios小案例-获取笑话

<!--
学习Vue
axios
获取笑话
--><!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>vue-11</title></head><body><h1>Hello World!</h1><divid="app"><inputtype="button"value="获取笑话"@click="getJoke"><p>{{msg}}</p></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><scriptsrc="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script><script>var app=newVue({el:'#app',//id选择器data:{msg:"很好笑的笑话"},methods:{getJoke:function(){
                _this=this//在axios里this会有变化，这里要用变量存起来
                axios.get("https://autumnfish.cn/api/joke").then(function(resp){
                    console.log(resp.data)
                    _this.msg=resp.data;},function(error){
                    console.log(error)})}}})</script></body></html>
标签： vue.js 学习 javascript
本文转载自: https://blog.csdn.net/weixin_59357453/article/details/129907979
版权归原作者 人道逍遥 所有， 如有侵权，请联系我们删除。
登录后发布评论

“Vue学习-Vue入门”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

【在Linux世界中追寻伟大的One Piece】多线程(三)

【Linux】Linux常用命令

如何在使用 Selenium Python 之前定位伪元素 ::before

解决docker镜像无效的问题

Android Studio 安装配置教程 - MacOS(详细版)

关于安卓注入几种方式的讨论，开源注入模块实现

全开源！巨好用！网工必备的三个堡垒机

文章导航