小白学VUE

TING-JYL

已于 2024-02-04 20:42:24 修改

阅读量439

点赞数 12

文章标签： vue.js

于 2023-11-27 20:35:17 首次发布

本文链接：https://blog.csdn.net/m0_50041027/article/details/134652633

版权

小白学VUE

如何创建VUE项目

首先创建一个你想要用来放项目的文件夹，在这个文件夹下使用命令行cmd，
使用命令：

create vue name  //name表示项目名称

选择vue版本 2/3 选择安装
然后在VsCode中打开这个文件就会看到如下的项目架构:
在这里插入图片描述
node_modules是安装node后用来存放用包管理工具下载安装的包的文件夹。
src是主要项目文件，
其中assets是用来放logo图片等、
components是用来放组件，
router是路由的跳转，
views是页面视图，
App.vue是整个页面的入口，
main.js整个项目配置的入口，可以组合所有的包，
vue.config.js是项目里的配置，可以配置端口跨域等问题。

拜拜下期见！！！
————————————————————————————————————————————————————————————————————————————————————————
时隔几日继续更新啦

Vue介绍

可以直接去官网看，附赠官网链接

vue官网
个人总结：
Vue是js框架，简化了js页面操作
bootstrap是css框架封装css
vue出现打破了前后端分离的现状，之前大家都使用的是jquery框架，可以让程序员轻松的完成数据和页面的双向绑定。
vue发送json格式请求发送到后端处理数据

Vue入门

下载vue.js

打开到官网选择按照Vue 有开发版本和生产环境版本选择开发环境下载就可以.存储位置随意,自己记得就行。

//开发环境版本
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

//生产环境版本  一般打包部署上线使用
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14"></script>

将你创建的存放项目的文件夹用VScode打开，比如我创建的文件夹是Code,同时在Code下面创建lib文件夹、lesson文件夹。
在这里插入图片描述
如图所示，当然文件名称可以自己起。
将刚才下载的开发环境版本的Vue复制到lib文件夹下，同时在lesson中创建一个名为“vue入门.html”的文件就可以开始我们的vue入门之旅啦!!!

开始

打开刚才的.html文件发现里面是空的，使用快捷键 html5 一键生成模板
在这里插入图片描述
这样模板就生成了。
首先我们使用

<script src="../lesson/lib/vue.js"></script>

地址就是我们下载放在lib下的Vue.js。这样就是成功引入Vue了。
恭喜你已经成功引入了，真的很棒。
引入之后我们就要进行实例化Vue，同样使用

<script>
  new Vue({
    el:"#app",//el:element 元素 代表vue实例的作用范围
    data:{
      msg:"li",
      count:0,
      content:"who are you "
    }//自定义各种数据
  });//创建一个vue实例
</script>

以上就是实例化代码。
下面我们就可以来书写Vue代码了。在实例化中我们说明了Vue实例的作用范围是el:app,也就是作用范围是名为app的元素内部,其他地方是没有用的。
data是我们自己定义的各种数据，可以在实例化的范围里显示、调用等。
ok 下面我们就来创建名为app的作用范围。

<body >
  <div id="app">
    <h2>{{msg}}</h2> 
    <!-- {{}}插值表达式 -->
    <div>
      {{count}}
      <div>{{count+1}}</div>
    </div>
    <H2>{{content.length}}</H2>
  </div>
  
</body>

上述代码，我们定义了一个名为app的作用空间（注意这个id不能在body上使用），然后我们就可以在里面使用刚才定义的数据了，这里使用数据的时候用{{ }}来引入。
数据就显示在页面上了。整体代码如下：


<body >
  <div id="app">
    <h2>{{msg}}</h2> 
    <!-- {{}}插值表达式 -->
    <div>
      {{count}}
      <div>{{count+1}}</div>
    </div>
    <H2>{{content.length}}</H2>
  </div>
  
</body>
</html>
<script>
  new Vue({
    el:"#app",//el:element 元素 代表vue实例的作用范围
    data:{
      msg:"li",
      count:0,
      content:"who are you "
    }//自定义各种数据
  });//创建一个vue实例
</script>
<!-- 一个页面只能存在一个Vue实例，不能创建多个Vue实例 -->
<!-- Vue中el实例 表示Vue实例的范围内使用 -->
<!-- 如果使用{{}}进行data的数据获取 可以在{{}}取值语法中 进行各种运算 或者相关的方法进行调用 -->

data属性

data是我们在实例化中自己定义的数据，数据类型可以是对象、数组、列表等，直接看练习完整代码：


<body>
  <script src="../lesson/lib/vue.js"></script>
  <div id="app">
  <h3>{{msg}}</h3>
  <h1>{{content+1}}</h1>
  <h2>{{user.id}} === {{user.age}}</h2>
  <h2>{{user.name}}</h2>
  <h3>{{diqu[0]}}</h3>
  <h2>{{userList[0].name=='刘'}} ====== {{userList[1].name}}==={{userList[3].age}}</h2>
  </div>
</body>
</html>
<script>
  var app  = new Vue(
    {
      el:'#app', //作用范围
      data:{
        msg:'hello',
        content:0,
        user:{id:001,name:'刘',age:22},//对象的获取
        diqu:["北京","上海","深圳"],//数组的获取
        userList:[
        {id:001,name:'刘',age:22},
        {id:002,name:'kkk',age:22},
        {id:003,name:'刘q',age:22},
        {id:004,name:'刘w',age:22},

        ]
      }//Vue实例中的数据

    }
  )
</script>

这里实例里面data中的数据类型包括对象，数组，列表，调用方法和之前的一样，循环后面会说到。

v-text和v-html

之前数据的传输使用{{ }}键值对就可以传输，Vue中还包括两个属性v-text和v-html。使用{{ }}直接数据的传输不会覆盖原来标签中的数据，使用v-text会覆盖原来标签中的数据，只显示data中的定义的数据，v-HTML会把data中含有的html的属性转化成样式，而不会直接显示。（这是一道面试题！！！v-text和v-html的不同）
完整代码如下：


<body>
  <div id="app">
     <span>{{msg}}llljjj</span><br>
     <span v-text = 'msg'>llllljjjj</span><br>//注意书写格式
     <span v-html="msg">llllljjjj</span><br>//注意书写格式
     <!-- <a href="#">点击跳转</a> -->

  </div>


</body>
</html>
<script>
  new Vue(
  {
    el:"#app",
    data:{
      msg:'<a href="#">点击跳转</a>',//外单内双，外双内单

    },
  }
  )
</script>
<!-- {{}}插值表达式和 v-text的区别 -->
<!-- 使用v-text取值会覆盖标签中原有的数据而使用插值表达式不会覆盖掉原有的数据 -->

v-on事件绑定

事件发生是需要：事件源事件发生的dom 事件发生的特定动作 click 监听
1、在Vue中使用v-on来进行绑定事件 v-on：事件名
2、在Vue中 V-on：事件名赋值的这个语句就是调用的函数名
3、在Vue中v-on 定义的所有函数统一放在methods 属性中
4、在Vue中定义的this指的是当前Vue实例中的属性或者方法，以后调用vue实例中属性或者方法都可以用this调用。
下面是一个简单触发的代码：

<body>
  <div id="app">
    <h1 v-text="msg"></h1>

    <input type="button" value="点击增加" v-on:click="chufa">

  </div>
</body>
</html>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:"llll",
      age: 10
    },
    methods:{//方法必须定义在这个里面
      chufa:function(){
        alert("点击了")

      }
    }
  })
</script>

下面是v-on的一个简单事件调用的操作

<body>
  <div id="app">
    <h1 v-text="msg"></h1>
    <span v-text="age"></span>
    <!-- <h2>{{age}}</h2> -->
    <input type="button" value="点击增加" v-on:click="chufa">

  </div>
</body>
</html>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:"llll",
      age: 10,
    },
    methods:{//方法必须定义在这个里面
      chufa:function(){
        //this
       console.log(this)
       this.age++,
       this.tixing()

      },
      tixing:function(){
        console.log("触发成功")
      },
    }
  })
</script>

vue事件简化语法

v-on：click="事件名称"可以直接使用@来代替@click=“事件名称”

 <input type="button" value="点击增加" v-on:click="zengjia">

在定义函数的时候有两种方法简化写法：：function可以省略
直接函数名（）{} （推荐这个啦）

methods:{
      zengjia(){//省略了:function() 直接调用就可以了
        this.age++,
        this.tishi
      },
      tishi:function(){
        alert('ok')
      }
    }

Vue事件参数传递

在调用事件的时候，可以进行参数的传递，在事件定义的地方给出变量传递的参数。

<body>
  <div id="app">
    <h2 v-text="m"></h2>
    <h2 v-text="age"></h2>
    <input type="button" value="点击增加" @click="zengjia(10,'努力成为世界上最内敛的人')" >
    //上面给出了调用方法时候传递的参数
    <!-- <input type="button" value="tishi" @click="tishi"> -->
  </div>
  
</body>
</html>
<script>
  new Vue({
    el:'#app',
    data:{
      msg:"llll",
      age:20,
    },
    methods:{
    //这里对参数进行了接收，接收的时候取名都是随便的，然后在方法里面调用传递过来的参数就可以了
      zengjia(a,msg){
        this.age=this.age+a,
        this.tishi()
        this.msg=msg
      },
      tishi:function(){
        alert('ok')
        console.log('aaaa')
      }
    }
  })
</script>

v-show、v-if、v-bind

v-show是用来控制vue标签是显示还隐藏的一个属性。代码如下：

 <h1 v-show="false"> 世界上最内敛的人</h1>//这句话是不显示的，属性为false
  <H1 v-show="show">世界上最聪明的人</H1>//在后面方法里面定义了show，会随着click的改变而变化
  <input type="button" value="展示标签" @click="show1">
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      show:false
     
    },
    methods:{
      show1(){
        // if(this.show==true){
        //   this.show=false
        // }else{
        //   this.show=true
        // }
        this.show =!this.show
      }

    }
  })
</script>

v-if和v-show的作用一样，相当于条件判断语句，上述代码将v-show改为v-if是可以直接运行的，效果也是同样的。

<div id="app">
  <!-- v-if是用来控制标签 是展示还是隐藏的 -->
  <h1 v-if="false"> 世界上最内敛的人</h1>
  <H1 v-if="show">世界上最聪明的人</H1>
  <input type="button" value="展示标签" @click="show1">
</div>

v-bind是用来进行属性绑定的，通过vue可以动态的修改标签中的内容。

<div id="app">
  <!-- v-bind是用来绑定标签的属性 通过vue动态的修改标签的内容 -->

// v-bind绑定了自己定义的数据里面的imgs  可以发生动态的改变 直接使用{{imgs}}是不行的
    <img v-bind:src="imgs" alt="" width="300" height="200">
    <input type="button" value="点击切换图片"  name="" id="" @click="gaibian" >
    <h1>{{text}}</h1> 
</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
     imgs:'./01.jpg',
     text:'这是一个动画图'
     
    },
    methods:{
      gaibian(){
        this.imgs='./02.jpg'
        this.text='这是明星图片'

      }
     

    }
  })
</script>

v-for

v-for是用来遍历对象，是一种常用的属性，必须要掌握，在以后的遍历中经常会用到。同时需要一个in标签(value,key,index)in对象名。
伪代码如下：

<body >
 <div id="app">
  <!-- v-for是用来遍历对象的  需要有一个in标签   （value，key， index）in 对象名 -->
  <span v-for="(value,key,index) in user">
    {{index}}:{{key}}:{{value}}
  </span><br>
  <span v-for="value in user">
    {{value}}
  </span>
   <br>
   <span v-for=" a in user">{{a}}</span>
   <br>
   <!-- 使用v-for来循环数组 -->
   <!-- 数组第一个值是value，第二个值是index -->
   <ul>
      <li v-for="b,c in arr">
        {{b}},{{c}}
      </li>
   </ul>

   <!-- 使用v-for来遍历数组中的对象 -->
   <ul>
      <li v-for="user in userlist">
        {{user.name}}{{user.age}}

      </li>
   </ul>
   <span v-for=" (value,key,index) in userlist">{{value.id}}</span>

</div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:'#app',
    data:{
      user:{id:'1',name:'a',age:'20'},
      arr:["北京","shanghai","shengzhen"],
      userlist:[
      {id:'1',name:'a',age:'20'},
      {id:'2',name:'b',age:'22'},
      {id:'3',name:'c',age:'21'},

      ]

v-model

v-model是Vue中的核心，他的作用是实现双向绑定，绑定元素中标签的数据和Vue中data的数据，使这两个数据保持一致，从而实现双向绑定，先来看一个简单的代码：

<div id="app">
    <!-- v-model作用是用来绑定标签元素和Vue实例对象中data数据 保持一致 从而实现双向绑定的数据一致 就是mvvm-->
    //使用v-model将msg和这个input属性绑定  当input的msg发生改变的时候data中的msg也发生了相应的改变
    <span>{{msg}}</span>
    <input type="text" v-model="msg">
  </div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      msg:"世界上最内敛的人"

    },

下面再来看一个简单的例子关于v-model数据双向绑定了解一下前端获取的数据如何传输到后端：

<body>
  <div id="app">
  <form>
    姓名：<input type="text" v-model="userlist.name"><br>
    年龄：<input type="text" v-model="userlist.age"><br>
    电话：<input type="text" v-model="userlist.phone"><br>
    邮箱：<input type="text" v-model="userlist.eml"><br>
    <input type="button" value="提交" @click="submation()">
  </form>
  </div>
  
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{
      userlist:{}
    },
    methods:{
      submation(){
        // 通过使用v-model就可以把标签元素和data中的数据绑定在一起
        // 获取值
        console.log(this.userlist)
        // 发送ajax axios请求
      }
    }
  })
</script>

将表单中的数据使用 v-model和dada中的userlist绑定在一起，最后打印一下userlist就知道前端的数据已经存在userlist中，获取值之后我们发送ajax请求就可以把数据传输到后端。
总结：1、使用v-model 可以实现数据的双向绑定；
2、双向绑定的意思是当表单中的数据发生变化 vue实例中data也会发生变化 vue中的data数据发生变化表单中的数据也会发生变化就是双向绑定；
3、mvvm架构双向绑定机制；
4、Model 数据 vue中实例绑定数据；
5、VM ViewModel 监听器；
6、View 页面页面展示的数据。

事件修饰符

事件修饰符的作用就是和事件连用，用来确定事件触发或者是组织事件触发的机制，常用的事件修饰符有：stop 停止冒泡，prevent 阻止，self 独自，once 一次
代码如下：

  <div id="app">
    <h1>stop修饰符</h1>
    <div style="width: 200px; height: 300px; background-color: aquamarine;" @click="parent">
    <!-- 用来阻止事件冒泡 -->
      <div style="width: 100px; height: 100px; background-color: salmon;" @click.stop="child"></div>
    </div>

    <!-- prevent事件修饰符 -->
    <h1>prevent修饰符</h1>
    <!-- 用来阻止默认标签的行为 -->
    <a href="https://www.baidu.com/" @click.prevent="tiaozhuan">点我跳转</a>

    <h1>self修饰符</h1>
    <!-- 用来针对当前发生的事件触发 只触发自己标签上特定的动作 不监听冒泡 -->
    <!-- 用来针对当前标签发生的事件，只触发自己标签上特定的动作 不触发冒泡 -->
    <div @click.self="divclick" style="width: 100px; height: 100px; background-color: blue;">
      <input type="button" value="按钮" @click="buclick">
      <input type="button" value="按钮1" @click="buclick1">
  
    </div>
  
    <h1>once修饰符</h1>
    <!-- 一次作用 让事件只触发一次 -->
    <a href="https://www.baidu.com/" @click.prevent.once="tiaozhuan">点我跳转</a>
  
  </div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  new Vue({
    el:"#app",
    data:{},
    methods:{
      parent(){
        console.log('parent')
      },
      child(){
        console.log('child')
      },
      tiaozhuan(){
        alert('触发了')
      },
      divclick(){
        console.log('divclick')
      },
      buclick(){
        console.log('buclick')
      },
      buclick1(){
        console.log('buclick1')
      }
    }
  })
</script>

按键修饰符

作用：用来和键盘中的按键事件进行绑定用来修饰特定的按键修饰符，常见的修饰符有：enter 回车键、tab回退一格、esc 返回键、space 空格、up 向上、down 向下、left 左、right 右。

<div id="app">
      
  <input type="text " v-model="msg" @keyup.enter="keyups">
  </div>

//回车键就可以打印 可以作用于我们平时的回车直接搜索
<script>
  new Vue({
    el:"#app",
    data:{
      msg:''
    },
    methods:{
      keyups(){
        console.log(this.msg)
      }
   
    }
  })

axios

Axios是一种异步请求技术，核心作用是用来给页面发送异步请求的，并获取相应的数据在页面中渲染。可以阅读axios的官方文档

https://www.axios-http.cn/docs/intro

1、从浏览器创建 XMLHttpRequests
2、从 node.js 创建 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、超时处理
8、查询参数序列化支持嵌套项处理
9、自动将请求体序列化为：
JSON (application/json)
Multipart / FormData (multipart/form-data)
URL encoded form (application/x-www-form-urlencoded)
将 HTML Form 转换成 JSON 进行请求
10、自动转换JSON数据
11、获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
12、为 node.js 设置带宽限制
13、兼容符合规范的 FormData 和 Blob（包括 node.js）
14、客户端支持防御XSRF

axiso的程序步奏
1、引入axios，在线或者本地的都可以

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

2、创建一个实例您可以使用自定义配置新建一个实例，进行baseURL封装。

const ax = axios.create({
        baseURL: 'http://127.0.0.1:9201',
        timeout: 1000,
      })

3、发送请求

 ax.get('/user').then(function(resp){
          console.log(resp)
      }).catch(function(error){
          console.log(error,"123123")

      })
         ax.post('/user1', {
        id: '1',
        name: 'Flintstone'
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });

这里发送的请求需要和后端进行链接，后端代码如下所示：

@RestController
@CrossOrigin//解决跨域问题
public class DemoController {
    private static final Logger LOGGER = LoggerFactory.getLogger(DemoController.class);

    @GetMapping("/user")
    public String user(){
        LOGGER.info("进入了user方法");
        return "恭喜你进入user方法";
//        int n=1/0;
//        return "写错了";
    }


    @PostMapping("/user1")
    public String user1(@RequestBody UserEntity user){
        LOGGER.info("进入了user1方法");
        LOGGER.info("id{} name{}",user.getId(),user.getName());
        return "恭喜你进入了user1方法";
    }
}

同时在调整页面的时候我们可以查看控制台和网络。

拦截器

// 拦截器
      // 添加请求拦截器
      //请求拦截器  在后端发送请求的时候的拦截器
      ax.interceptors.request.use(function (config) {
          // 在发送请求之前做些什么
          config.url += "?token=1234"
          return config;
        });

        // 添加响应拦截器
      ax.interceptors.response.use(function (response) {
          // 2xx 范围内的状态码都会触发该函数。
          // 对响应数据做点什么
          console.log("进入了相应拦截器",response)
          return response;
        });

Vue中的生命周期

Vue实例的生命周期（初始化阶段运行阶段销毁阶段）生命周期钩子生命周期函数。
Vue 从创建实例到最后的销毁会自动触发一些函数。
Vue的生命周期函数有8个。
beforeCreate、created、 beforeMount、mounted、beforeUpdate、 Updated、 beforeDestory、destoryed
具体代码如下：

// 初始化阶段
    beforeCreate(){
      // 生命周期函数中第一个函数 ，这个函数在执行Vue实例的时候，仅仅完成了自身事件的绑定
      // 和生命周期函数的初始化的工作，Vue中没有获取到el，data，methods等属性，
        console.log(this.msg)
    },
    created(){
      // 生命周期中第二个函数，这个函数在执行的时候 Vue他的实例已经初始化了data和methods等方法
      // 此时还未渲染
        console.log(this.msg)
        this.abc()
    },
    // 生命周期中的第三个函数 开始挂载编译生成的HTML到对应的触发的钩子函数，但此时还未将编译出的html渲染到页面上。
    // 这个函数在执行Vue将el中指定范围做为模板翻译
    beforeMount(){
      console.log("beforeMount"+document.getElementById("h1").innerText)  
    },
    // 生命周期函数中的第四个函数，这个函数在执行过程中，已经将数据渲染到界面中并且已经更行页面
    // 可以发送ajax请求获取数据的操作 进行数据的初始化
      mounted(){
        console.log("Mounted"+document.getElementById("h1").innerText)  
    },





    //生命周期中第5个函数  这个函数是data中数据发生变化时候执行 将编译好的HTML替换掉el属性所指向的dom对象或替换对应HTML标签里面的内容
    // 这个事件执行仅仅只是Vue中实例中data数据变化 页面显示仍然是原始数据
    beforeUpdate(){
      console.log("beforeUpdate"+this.msg)
      console.log("beforeUpdate"+document.getElementById("h1").innerText)  
    },
    //生命周期中的第6个函数 这个函数是data中数据发生变化时候执行，页面中的数据已经和data中的数据保持一致了
    //  updated执行时，页面和data数据已经保持同步，都是最新的
    Updated(){
      console.log("Updated"+this.msg)
      console.log("Updated"+document.getElementById("h1").innerText)  
    },



  // 销毁阶段
    beforeDestory(){
      // 生命周期的第7个函数 该函数执行的时候，Vue中的所有数据 methods component都没有销毁
      console.log("执行了销毁前beforeDestory")
    },
    destoryed(){
      // 生命周期的第8个函数 该函数执行的时候Vue中所有的实例都被销毁
      console.log("执行了销毁Destoryed")
    }
    


  })

Vue中的组件（component）

1、组件的作用
用来减少实例对象中的代码量将不同的业务功能划分成不同的组件，由多个组件去进行整个页面的布局，便于咱们在vue开发中进行页面管理，方便咱们维护。
2、组件使用
全局的一个组件注册定义在实例外，script中代码格式如下：

  Vue.component('login',{
    template:'<h1>用户登录</h1>'

  })

咱们可以在Vue实例中的任何位置使用这个组件（范围就是el标签里面）。
Vue的componet 是用来开发全局组件的代码格式如下所示：
参数1 组件名称，参数2 组件配置{ template:‘’ 用来书写组件的html代码 } template 中必须有且只能有一个root div元素。
使用Vue的作用范围根据组件名使用全局组件。使用组件的代码如下所示：

<login>   </login>//成功使用定义的组件login 注意组建使用范围

如果咱们在定义组件名的时候需要用到驼峰命名法的时候需要在所有单词小写的地方加_进行使用。

局部组件

局部组件的创建分为4步，如下面代码所示：

<body>
  <!-- 1、声明局部模板 template标签 要在Vue实例作用范围外声明 -->
  <template id="loginmoban">
    <h1>用户登录</h1>
  </template>
  <div id="app">
    <!-- 4、局部组件的使用 -->
    <login>    </login>

  </div>
  
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
// 2、定义用来保存模板的配置对象
let login1 = {
  template : '#loginmoban' //使用自己定义的id
}


  new Vue({
    el:"#app",
    data:{

    },
    methods:{

    },
    // 3、注册组件
    components:{
      // 页面里的标签名字：定义的局部组件名字
        login:login1
    }
  })
</script>

Props静态数据传输

1、使用组件的时候可以在组件上定义多个属性或者对应的数据
2、组件内部可以使用props数组把属性名定义上去之后使用的时候直接{{属性名}进行调用获取值
代码如下：

  let login1 = {
    // 使用驼峰命名
    template :'<div> <h1>用户{{userName}}  年龄:{{age}}</h1></div>' ,
    props:["userName","age"]
  }

全部代码如下：

<div id="app">
    <div>
      <!-- 使用全局组件 -->
      
      <h1>用户注册</h1>
      <login user-name="ljy" age="2"> </login>
    </div>
     
  </div>
</body>
</html>
<script src="../lib/vue.js"></script>
<script>
  // 1、定义 
  let login1 = {
    // 使用驼峰命名
    template :'<div> <h1>用户{{userName}}  年龄:{{age}}</h1></div>' ,
    props:["userName","age"]
  }

  new Vue({
    el:"#app",
    data:{

    },
    methods:{

    },
    components:{
      // 页面里的标签名字：定义的局部组件名字 
      login:login1  
    }
  })
  </script>

Props动态数据传输

在这里插入图片描述

prop的单项数据流

所有的prop都使得其父子prop之间形成了一个单向向下绑定：父级prop的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生变更时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台中发出警告。

路由

路由是Vue中重要的概念,页面之间的跳转用到了路由,如何使用路由：
1、引入路由，下载路由文件然后引入

<script src="../lib/vue-router.js"></script>

2、创建组件对象，声明一个模板

const login ={
    template:'<h1>登陆</h1>',
    data(){
      return{}
    },
    methods(){},
    created(){
      console.log("------>",this.$route.query.id,"------>",this.$route.query.name)
      // console.log(this)
    }
  }
  const register ={
    template:'<h1>注册</h1>',
    created(){
      console.log(this)
    }

  }

3、定义路由规则，创建路由对象

const router =  new VueRouter({
  routes:[
    // path:路由的路径  component:路径对应的组件
    // 
    {path:'/login',component:login},
    {path:'/register/:age/:name',component:register}

  ]

  })

4、创建路由对象

    router:router

5、路由的使用，在页面里面进行跳转

//这个to的地址和path相互链接
 <router-link to="/login" tag="button">跳转登录</router-link>
    <router-link to="/register" tag="button">跳转注册</router-link>

    <!-- 5、在页面进行展示 -->
     <!-- 显示路由的组件 -->
    <router-view> </router-view>

路由的传参方式

1、使用？来传递参数，直接在组件中进行拼接，可以在前台进行打印，看看route中的参数
在这里插入图片描述
使用Vue自带的进行打印代码如下：

const login ={
    template:'<h1>登陆</h1>',
    data(){
      return{}
    },
    methods:{

    },
    created(){
      console.log(this.$route.query.id,this.$route.query.name),
      console.log(this)
    }
  }
  const register ={
    template:'<h1>注册</h1>'
  }

2、使用路径传递参数
代码如下：

<router-link to="/register/22/ljy" tag="button">跳转注册</router-link>
  {path:'/register/:age/:name',component:register}
  const register ={
    template:'<h1>注册</h1>',
    data(){
      return{}
    },
    methods:{},
    created(){
      console.log(this)
      console.log(this.$route.params.age,this.$route.params.name)
    }
  }

路由的嵌套

1、声明内外路由嵌套

 <template id="product">
    <div>
      <h1>商品管理</h1>
      <router-link to="/product/add">商品添加</router-link>
      <router-link to="/product/edit">商品编辑</router-link>
      <router-view></router-view>
    </div>
  </template>

2、声明模板创建路由

 const product ={
    template:'#product'
  }
  const jingyin ={
    template:'#jingyin'
  }
  const add={
    template:' <h3>商品添加</h3>'

  }
  const edit={
    template:' <h3>商品编辑</h3>'
  }

  const router=new VueRouter({
    routes:[
      {path:'/product',
      component:product,
      children:[
        
        {path:'add',component:add},
        {path:'edit',component:edit}
      ]   
    },
    {path:'/jingyin',component:jingyin}
    ]
  })

3、实例化

 new Vue({
    el:'#app',
    data:{},
    methods:{},
    //4、 创建路由对象
    router:router
  
  })

4、使用模板

<div id="app">
    <h1>vue路由</h1>
    <router-link to="/product">商品管理</router-link>
    <router-link to="/jingyin">经营管理</router-link>
    <router-view></router-view>
  </div>

VueCli脚手架

什么是cli？相当于命令行语言，在图像界面没有普及之前，没有鼠标，直接输入命令，计算机得到指令之后执行某个操作。
什么是VueCli就相当于maven的项目构建工具，可以快速的开发一套完整系统，使用Vue脚手架之后，所有的页面都是一个完整的系统，
在终端创建vue项目，步奏就可以自己找教程
初始化语言是

vue create 01

创建好之后的项目和解释如下图所示：
在这里插入图片描述

element UI

引入element UI
去element UI的官网官网链接
首先下载element UI 在终端运行

npm i element-ui -S

在这里插入图片描述
引入路由

npm install axios --save

还要在main.js中引入

import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.config.productionTip = false
//再使用Vue.use来引入import
Vue.use(ElementUI);
Vue.use(axios,VueAxios);

Vue打包

npm run build

运行完之后打包在dist里面。Vue脚手架打包出来的文件，必须在咱们的服务器中运行，不能双击执行。

Vuex状态管理

1、安装vuex
可以在开始创建脚手架的时候直接安装，另外是npm install vue@next --save
创建vue cli中创建 store的文件夹。在main.js中引入store并注册到vue实例中。
这个用到的比较少了解一下就行

完结了，锻炼一下，就能看懂vue代码，多写写就会了。后面会出一期vue的项目。

TING-JYL

关注

12
点赞
踩
7

收藏

觉得还不错? 一键收藏
4
评论
小白学VUE

可以直接去官网看，附赠官网链接vue官网个人总结：Vue是js框架，简化了js页面操作bootstrap是css框架封装cssvue出现打破了前后端分离的现状，之前大家都使用的是jquery框架，可以让程序员轻松的完成数据和页面的双向绑定。vue发送json格式请求发送到后端处理数据。
复制链接

扫一扫