vue入门

最新推荐文章于 2023-05-25 22:40:09 发布

刚入门的白

最新推荐文章于 2023-05-25 22:40:09 发布

阅读量207

点赞数

本文链接：https://blog.csdn.net/qq_41438239/article/details/109328464

版权

Vue

vue是一个前端框架，在开发时我们可以直接引用

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

生产中可以使用

<!-- 生产环境版本，优化了尺寸和速度 --> 

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

方式二：下载和引入

开发环境：https://cn.vuejs.org/js/vue.js

生产环境：https://cn.vuejs.org/js/vue.min.js

方法三：使用npm

npm install vue

Hello World

vue的使用，我们还是用hello word 举例

<!-- html页面中我们-->

<div id="app"> {{ message }} </div> 

<!--script中定义一个app的变量名，标注id为  el:"app"，其中信息都采用json结构     -->
<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Word!'
  }
})
</script>

v-text、v-html

当我们在data中定义了变量在页面中就可以使用{{变量名}}显示出来（作用域为有id标签的范围）

data中不单可以定义字符串，还可以定义json、数组、html元素。

<script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"信息"
                ,xiangxi:{
                    name:"wang"
                    ,age:"23"
                    ,loc:"fengtai"
                }
                ,shuzu:["111","222","333"]
                ,ht:"<h2>1113331</h2>"
            }
        })
    </script>

我们取值时候可以使用{{变量名}}、v-text、v-html.（{{变量名}}与v-text基本相同）。值得注意的是如果使用了v-text那么整个标签的信息只会显示v-text的信息而{{变量名}}可以实现字符串拼接

<div id="app">
<!--{{}}取json-->
{{xiangxi.name}},{{xiangxi.age}},{{xiangxi.loc}}
    
<!--{{}}取数组结构-->
{{shuzu[0]}}  ,  {{shuzu[1]}}  ,  {{shuzu[2]}}

<!--   v-text取json   -->
<h2 v-text="xiangxi.name"  ></h2>

<!--  v-html在页面中可以显示html的信息   -->
<div v-html="ht"></div>
  
<!--   {{}}字符串拼接的两种方式  -->
<h2 >1111{{xiangxi.name +"222"}}</h2>
</div>

v-on

进行事件绑定，同时v-on可以简写为，html中采用 @方法=“方法名”，script中方法名一定卸载methods中方法名:function(){}

<div id="app">
<input type="button" value="单机" v-on:click="danji">
<!--或<input type="button" value="单机" @click="danji">-->

<input type="button" value="双击" v-on:dblclick="shuangji">

<h1 @click="change">{{message}}</h1>

<script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"信息改变"
            }
            ,methods:{
                danji:function(){
                    alert(111)
                }
                ,shuangji:function(){
                    alert(222)
                }
                ,change:function(){
                    this.message+="添加";
                }
            }
        })
    </script>

计数器的demo

<div id="app">
<input type="button" value="-" @click="jian">
<span>{{shuzi}}</span>
<input type="button" value="+" @click="jia">
</div>

<script>
        var app = new Vue({
            el: "#app",
            data: {
                , shuzi: 0           
            }
            , methods: {
                , jian: function () {
                    if (this.shuzi > 0) {
                        this.shuzi -= 1;
                    } else {
                        alert("不能在小了")
                    }
                }
                , jia: function () {
                    if (this.shuzi < 10) {
                        this.shuzi += 1;
                    } else {
                        alert("最大了")
                    }                 
                }
            }
        })
    </script>

.stop

v-on的修饰符 .stop的使用，当点击一个内部的点击事件后，其外部点击事件并不会生效。

    <div id="app">
      <div @click='demo1'>
        <input type="button" value="anniu" @click.stop='demo2'>
      </div>
    </div>

如代码所示如果button中的click不加stop，那么当我们点击时候也会调用demo1。当我们加上.stop后事件结束后会自动停止。

.prevent

可以阻止事件的提交，当我们点击提交按钮时，提交了一个表单信息，但是我们此时并不想跳转界面，就可以使用.prevent

    <div id="app">
      <form action='baidu'>
        <input type="submit" value="anniu" @click.prevent='tijiao'>
      </form>
    </div>

.{keyCode|keyAlias}

只当事件是从特定的按键触发时才触发回调，最常见的回车登录。（keyCode：键盘编码，keyAlias：键盘简写）

    <div id="app"> 
        <input type="text" @keyup.enter='tijiao'>
    </div>

.native

自定义组件的监听

.once

只触发一次回调。

v-show

根基表达值的真假，切换元素的显示和隐藏,可以在v-show的表达式中设置true/false，或者表达式

<div id="app">
<input type="button" value="显示/隐藏" @click="changeishow">
<div v-show="isshow">{{message}}</div>
<div v-show="shuzi>=8">{{message}}</div>
</div>

<script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "信息"
                , shuzi: 10
                ,isshow:true
            }
            , methods: {
                changeishow:function(){
                    this.isshow=!this.isshow;
                }
            }
        })
    </script>

v-if

v-if与v-show实现的效果基本相同，但是v-if可以直接把元素从dom中移除，v-show改变的是dislay的属性style=“display: none;” 。但是操作dom对性能影响比较大，所以不经常改变的数据可以用v-if，经常改变的数据用v-show。

<span>{{hot}}</span>
<input type="button" value="加热" @click="changehot">
<p v-if="hot>=40">温度过高</p>

<script>
  var app = new Vue({
            el: "#app",
            data: {
                hot:30   
            }
            , methods: {
              changehot:function(){
                    this.hot+=1;
                }
            }
        })
    </script>

v-else

 <p v-if="hot>=40">温度过高</p>
 <p v-else>温度不够</p>

v-else-if

<p v-if="hot<40">温度不够</p>
<p v-else-if="hot<50">温度过高</p>
<p v-else>温度</p>

v-bind

用于数据绑定，实时显示。v-bind:属性=表达式。可以直接简写为:属性=表达式

<div id="app">
<img :src="imgsrc" :title="imgtitle" :class='showimgstyle?"imgstyle":""' @click="change">
<br>
<img :src="imgsrc" :title="imgtitle" :class="{imgstyle:showimgstyle}"  @click="change">  
</div>

 <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "信息"
                ,imgsrc:"http://pic2.sc.chinaz.com/files/pic/pic9/202009/bpic21381.jpg"
                ,imgtitle:"图片111"
                ,showimgstyle:false
            }
            , methods: {
                change:function()
                    this.showimgstyle=!this.showimgstyle;
                }            
            }
        })
    </script>

v-once

使用该标签只能改变一次，当变量的值变化时用该标签后则不会改变。

v-pre

使用该指令的标签内数据是什么样子的页面返回就是什么样子的，内部数据不会被解析。

v-cloak

由于代码解析的时候由于是自上而下解析的，当遇到{{message}}这样的情况当js没有解析完成，页面上就会出现{{message}}闪动成数据的效果哟，而改指令可以解决这个问题。通常该指令放在vue的作用标签的div中。

v-for

根据数据生成列表结构，用于循环，下面的demo相对较为全面

    <div id="app">
     <ul >
         <li v-for="(itm,index) in shuzu" >{{index+1}}.是{{itm}}
         <input value="删除" type="button" @click="shanchu(index)">
        </li>
     </ul>
     <p v-if="this.shuzu.length!=0">共{{shuzu.length}}条数据</p>
     <input type="button" value="增加一行" @click="zengjia">
     <input type="button" value="减少一行" @click="yichu">
     <input type="button" value="清空所有数据" @click="qingkong">
    </div>

     <script>
        var app = new Vue({
            el: "#app",
            data: {
                message: "信息"
                ,shuzu:[1,2,3,4,5,6,7]
            }
            , methods: {
                zengjia:function(){
                    if(this.shuzu.length==0){
                        this.shuzu.push(1)
                    }else{
                    console.log(this.shuzu.length)
                    this.shuzu.push(this.shuzu[this.shuzu.length-1]+1)
                    }
                }
                ,yichu:function(){
                    this.shuzu.shift();
                }
                , shanchu:function(data){
                    console.log(data)
                    this.shuzu.splice(data,1)
                } 
                ,qingkong:function(){
                   this.shuzu=[]
                } 
            }
        })
    </script>

axios

axios与其他包相同必须先导入再使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

用于数据的请求，功能强大的网络请求库格式：

axios.get(地址?key1=value1&key2=value2).then(function(response){},function(err){})

axios.post(地址,{key1:value1,key2:value2}).then(function(response){},function(err){})

then的回调函数在成功或失败时候触发，成功的时候触发第一个，失败的时候触发第二个。

通过回调函数的形参可以获取相应的数据或者失败的信息。

axios+vue

axios中的this已经改变，所以我们需要在axios的外部把this保存起来，定义var that = this;即可实现axios内区取data的值。

  <div id="app">
        <input type="button" value="get请求" @click="huoqu">
        <p v-text="joke"></p>
    </div>

 <script >
        var app= new Vue({
            el:"#app"
            ,data:{
                joke:"qq"

            }
            ,methods:{
                huoqu:function(){
                    var that=this;
                    axios.get("https://autumnfish.cn/api/joke").then(function(res){
                        console.log(res.data)
                        that.joke=res.data
                    })
                }
            }
        })
    </script>

v-model+axios+vue

v-model是双向绑定的意思，@keyup.enter="" 与方法绑定，可以实现通过某个按键实现方法。

下面是利用这些方法实现天气预报。

v-model当我们改变输入框的值得时候所绑定的数据就会改变，当我们想结束完当前操作时候在进行绑定就可以使用懒加载，这时我们需要点击回车，或者光标移除输入框外在进行绑定，实现的方法也很简单，只需要在"v-model.lazy"

"v-model.number"只能输入数字

"v-model.trim"可以用于去除空格

 <input v-model="query" @keyup.enter="searchmusic" >

<script>
var app = new Vue({
    el:"#app"
    ,data:{
        city:'',
        weather:[]
    }
    ,methods:{
        tianqi:function(){
            // console.log("天气查询")
            // console.log()
            var that = this;
            axios.get('http://wthrcdn.etouch.cn/weather_mini?city='+that.city).then(function(res){
                console.log(res.data.data.forecast)
                that.weather=res.data.data.forecast
            },function(err){
                alert(err+"shibai")
            })
        },
        changecity:function(data){
            this.city = data
            this.tianqi()
        }
    }
})
</script>

Computed

计算属性，与method的区别就是computed中的内容可以作为属性使用，method中是函数。

例如当我们需要一个计算后的结果，我们可以在computed中进行计算，然后返回结果，这样我们就可以与页面绑定。而且computed中含有缓存，内部属性计算过一次后下次可以最直接获取，methods中的方法，调用一次就会计算一次，因此computed效率较高。

computed中的值其实是靠get方法实现的，我们调用时候相当于获取到get后的数据

var、let、const的区别

var：ES5中的设计是有缺陷的，因为没有作用域，在大括号中定义的变量大括号外部也是可以可以使用的。

如：

if(true){
var name ='11'
}
console.log(name)

let：出现在ES6中已经可以解决了作用域的问题。大括号内部定义的变量只能在大括号内部使用。

const：在很多语言中都使用过const，如C/C++,主要作用是将某个变量修饰为常量，js中也是如此，当一个变量被const修饰后不可以在进行赋值，因此我们可以当作常量使用。

组件化开发

组建的使用分成三个步骤：

创建组件构造器
注册组件
使用组件

具体实现为：

调用Vue.extend()方法创建组件构造器
调用Vue.component()方法注册组件
在Vue实力的作用范围内使用组件


// 创建组件
  const zuJian = Vue.extend({
    template:`
    <div>
      <h1>组件</h1>  
      <h2>内容</h2>  
    </div> `
  })
  //注册组件
  //当我们写在外面的时候下面组件为全局组件
  //当我们写在vue实例中的 components：{myZuJian:zuJian}时候为局部组件
  Vue.component('myZuJian',zuJian)

<!-- 使用组件 -->
<my-zu-jian></my-zu-jian>

组件语法糖

  <div id="app">
     <zhu-jian></zhu-jian>
     <zhu-jian></zhu-jian>
  </div>

  <template id="zujianxinxi">
    <div>
    <input type="button" value="-" @click='jian'>
    {{shuju}}
    <input type="button" value="+" @click='jia'>
    </div>
</template>

 Vue.component("zhuJian",{
     template:"#zujianxinxi"
    ,data(){
           return{
               shuju:0
           }
       }
       ,methods:{
           jian(){
               this.shuju--
           }
           ,jia(){
               this.shuju++
           }
       }
  })

  var vm = new Vue({
    el: '#app'
  })

父子组件之间传值

一.父传子

  <div id="app">
     <zhu-jian :cmessage="message" ></zhu-jian>
  </div>

  <template id="zujianxinxi">
    <div >
      {{cmessage}} 
    </div>
  </template>

Vue.component("zhuJian",{
    template:"#zujianxinxi"
    ,props:{
      cmessage:{
        type:Array
        ,default(){
          return( ['1'])}
        ,required: true
      }
    }
  })

  var app = new Vue({
    el: '#app'
    ,data:{
      message:['1','2','3']
    }
  })

二、子传父

<div id="app">
    <zhu-jian @itmclick="zhujianclick"></zhu-jian>
  </div>

  <template id="zujianxinxi">
    <div>
      <button v-for="itm in deptno" @click="dianji(itm)">{{itm.id}}</button>
    </div>
  </template>

<script>
  Vue.component("zhuJian", {
    template: "#zujianxinxi"
    , data() {
      return {
        deptno: [
          { id: 1, name: 'wang' }
          , { id: 2, name: 'zhang' }
          , { id: 3, name: 'li' }
        ]
      }
    }
    , methods: {
      dianji(val) {
        this.$emit('itmclick', val)
      }
    }
  })

  var app = new Vue({
    el: '#app'
    , data: {
    }
    , methods: {
      zhujianclick(zz) {
        console.log(zz);
      }
    }
  })
</script>

父子组件的访问方式：$children

有时候我们需要父组件直接访问在子组件，子组件直接访问父组件，或者是子组件访问跟组件。

父组件访问子组件：使用 $children

或者$refs

子组件访问父组件：使用$parent

$children:默认是一个数组所以我们需要取到chilidren[0]

<div id="app">
    <zhu-jian></zhu-jian>
    <input type="button" @click="anniu" value="按钮"> 
  </div>

  <template id="zujianxinxi">
    <div>
      {{shuju}}
    </div>
  </template>

<script>
  Vue.component("zhuJian", {
    template: "#zujianxinxi"
    , data() {
      return {
        shuju:'数据1'
      }
    }
    , methods: {
      changeshuju(){
        this.shuju="数据2"
      }  
    }
  })

  var app = new Vue({
    el: '#app'
    , data: {
    }
    , methods: {
      anniu() {
        this.$children[0].changeshuju();
      }
    }
  })
</script>

$refs：一般情况下我们通常使用refs作为父子组件之间的关联，我们在父组件中使用

this. $refs，在父组件引入的子组件中使用ref作为标记。

  <div id="app">
    <zhu-jian ref="gaigai"></zhu-jian>
    <input type="button"  @click="gaibain" value="改变">
  </div>

  <template id="zujianxinxi">
    <div>
      {{shuju}}
    </div>
  </template>

<script>
 Vue.component("zhuJian", {
   template: "#zujianxinxi"
   , data() {
     return {
       shuju:'数据1'
     }
   }
   , methods: {
     gaibain(){
       this.shuju="数据3"
     }
     
   }
 })

 var app = new Vue({
   el: '#app'
   , data: {
   }
   , methods: {
	  gaibain() {
       this.$refs.gaigai.gaibain()   
     }
   }
 })
</script>

$parent：访问父组件

$root：访问根组件

slot

组件插槽：是为了让我们封装的组件更加具有扩展性。

当我们需要定义一些大体功能相同但是一些细节不同的组件的时候就需要使用插槽，我们只需要在组件中引入slot，并且在父组件中组件标签的中间设置我们想要展示的内容就可以替换插槽中的数据。如果组件中存在默认插槽数据，那么父组件引入的子组件标签中的内容会替换他。

  <div id="app">
    <zhu-jian> 
    </zhu-jian>

    <zhu-jian>
      <input type="text">
    </zhu-jian>
  </div>

  <template id="zujianxinxi">
    <div>
     <h1>组件</h1>
     <slot><button>按钮</button></slot>
    </div>
  </template>

具名插槽：可以根据slot的name来进行指定更改，我们只需要在引入中使用slot="" 。

  <div id="app">
    <input type="button" value="点击" @click="change">
    <zhu-jian v-if="flag">
      <input type="button" value="三" slot="shangpin"> 
     <span slot="shuru">详情</span>
     <input type="button" value="<" slot="sousuo"> 
    </zhu-jian>
      
    <zhu-jian v-else>
    </zhu-jian>
  </div>

  <template id="zujianxinxi">
    <div>
     <slot name="shangpin"><span>商品</span></slot>
     <slot name="shuru"><input type="text" placeholder="请输入"></slot>
     <slot name="sousuo"><button>搜索</button></slot>
    </div>
  </template>

前端模块化

ES6

方式一：

导出：先定义再导出

let name=“wang”

let age=18

export{name,age}

导入：

import {name,age} from “./…/”

方式二：

导出：直接定义导出

export var num1=1000;

刚入门的白

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue入门

Vuevue是一个前端框架，在开发时我们可以直接引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 生产中可以使用 <script src="https://cdn.jsdelivr.net/npm/vue"></script&gt
复制链接

扫一扫