Vue学习笔记

万物皆可der

已于 2022-07-27 15:13:37 修改

阅读量502

点赞数

文章标签： vue.js 学习 webpack

于 2022-07-24 20:59:29 首次发布

本文链接：https://blog.csdn.net/weixin_54174102/article/details/125926132

版权

文章目录

一、idea安装vue
二、vue学习

一、idea安装vue

1.搭建环境

搭建vue环境工具：node.js 主要是利用node.js里面的npm(包管理和分发工具)来安装依赖包
下载地址：https://nodejs.org/zh-cn/ (建议下载稳定版本)
检测是否安装完毕：窗口+r键-进入cmd-输入代码 node -v
在这里插入图片描述

2.idea安装插件

2.1 直接安装插件：打开file-setting-搜索vue 安装插件
2.2 如果插件里没有vue，进入官网https://plugins.jetbrains.com/plugin/9442-vue-js
下载对应的idea版本的插件
在这里插入图片描述
找到插件下载的位置，插入即可
2.3创建一个新的项目-选择一个新的路径储存文件

点击文件：找到下方的Terminal终端
进入刚才创建项目，在终端输入

1.安装npm淘宝镜像
npm i -g cnpm – registry=https://registry.npm.taobao.org
2.安装脚手架工具
npm i -g vue-cli
3.测试是否安装成功
vue -V
4.安装webpack工具
cnpm install -g webpack
5.以上完成后，创建项目
vue init webpack+ 项目名称
之后一路安装

components中是编写vue代码的位置
安装之后终端继续输入
cnpm run +项目名

项目创建结束
如果使用vue init webpack 项目创建不了项目出现错误

可能是下载某些git文件时需要翻网，这个时候可以提下下载好，webpack文件如下：
链接：https://pan.baidu.com/s/1z4C6mn0143154qxc-_4QAA?pwd=1234
提取码：1234
然后使用离线下载：在窗口终端输入: vue init webpack 项目名 --offiline 即可

3.项目部分文件认识

在这里插入图片描述

4.CDN方法

建议下载到本地后导入到项目中
链接：

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue@2.6.14/dist/vue.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

二、vue学习

1.基本语法

在Vue中元素相对于之前学习的，改动全部在指定的div中

数据属性：
el参数：类似于DOM元素中的id
data：用于定义属性，实例中有三个属性分别为：site、url、alexa
methods：用于定义的函数，可以通过return来返回函数值
{{}}：用于输出对象属性和函数返回值
vue还提供了有用的实例属性与方法：他们都有前缀$，以便与用户定义的属性区分开来
指令：带有v-前缀的特殊属性，用于在表达之改变时，将某些行为应用到DOM上
参数：在指令后以冒号指明
修饰符：修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定
v-html指令用于输出html代码

v-bind 将这个元素节点的tilte特征和vue实例的message属性保持一致

<script src = "vue.min.js"></script>
<body>
<div id = "xiaobo">
  <span v-bind:title="message">鼠标悬停几秒钟查看此处动态的提示信息
  </span>
</div>
</body>
<script>
  var vm = new Vue({
    el:"#xiaobo",
    data:{
      message:"hello,boy"
         }
    })
</script>

条件判断语句，v-if | v-else

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层，模板-->
<div id="app">
  <h1 v-if="ok">Yes</h1>
  <h1 v-else>No</h1>
</div>
</body>
<!--1.导入Vue.js-->
<script src="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    /*Model：数据*/
    data:{
      ok:true
    }
  });
</script>
</html>

v-else-if v-if v-else
v-else,v-else-if 必须跟在v-if或者v-else-if之后
=== 三个等号在js中表示中表示绝对等于(就是数据与类型都要相同)

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "bo">
  <h1 v-if="type==='A'">A</h1>
  <h1 v-else-if="type==='B'">B</h1>
  <h1 v-else-if="type==='D'">D</h1>
  <h1 v-else>C</h1>
</div>
</body>
<script src ="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#bo",
    data:{
      type:"A"
    }
  });
</script>
</html>

v-for items是数组,item是数组元素迭代的别名

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id = "bo">
  <li v-for="(item,index) in items">
    {{item.message}}---{{index}}
  </li>
</div>
</body>
<script src ="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#bo",
    data:{
      items:[
        {message:'小'},
        {message:'波'},
        {message:'小波'}
      ]
    }
  })
</script>
</html>

v-on 监听事件emsp；事件有vue的事件，和前端页面本身的一些事件

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "vue.min.js"></script>
<body>
<div id = "bo">
  <button v-on:click="hellobaby">点我</button>
</div>
<script>
  var vm =new Vue({
    el:"#bo",
    data:{
      message:"hello world"
    },
    methods:{
      hellobaby:function (event) {
          alert(this.message);
      }
    }
  });
</script>
</body>
</html>

2.表单双绑，组件

在全局性数据流使用单项，方便跟踪；局部性数据流使用双向，简单易操作
在表单中使用双向数据绑定：
单行文本：

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "vue.min.js"></script>
<body>
<div id = "bo">
    输入的文本：<input type="text" v-model="message"
  value = "hello">  {{message}}
</div>
<script>
  var vm = new Vue({
    el:"#bo",
    data:{
        message:""
    }
  });
</script>
</body>
</html>

多行文本：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id = "app">
  多行文本:<textarea v-model="pan"></textarea>>&nbsp;&nbsp;多行文本是:{{pan}}
</div>
</body>
<script type="text/javascript">
  var vm = new Vue({
    el: "#app",
    data:{
      message:"nihao",
      pan:true
    }
  });
</script>
</html>

单复选框

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id = "bobo">
  单复选框:
  <input type = 'checkbox' id = 'checkbox' v-model="checked">
  &nbsp;&nbsp;
  <label for ='checkbox'>{{checked}}</label>
</div>
<script>
  var vm = new Vue({
    el:"#bobo",
    data:{
      checked:false
    }
  });
</script>
</body>
</html>

多复选框：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<div id = "bo">
  多复选框:
  <input type="checkbox" id = '1' value = "1" v-model="num">
  &nbsp;&nbsp;
  <label for ='1'>1</label>
  <input type = 'checkbox' id="2" value="2" v-model="num">
  &nbsp;&nbsp;
  <label for ="2">2</label>
  <span>选中的值:{{num}}</span>
</div>
<script>
  var vm  = new Vue({
    el:"#bo",
    data:{
      num:[]
    }
  });
</script>
</html>

单选按钮：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id = "bo">
  单选框按钮
  <input type = "radio" id = "one" value="One" v-model="picked">
  <label for="one">One</label>
  <input type="radio" id = 'two' value="Two" v-model="picked">
  <label for="two">Two</label>
  <span>选中的值:{{picked}}</span>
</div>
</body>
<script>
  var vm = new Vue({
    el:"#bo",
    data:{
      picked:one
    }
  });
</script>
</html>

下拉框：v-model表达式的初始值未能匹配任何选项，元素将被渲染为未选中状态

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id  = "bo">
  下拉框：
  <select v-model = "pan">
    <option value = '' disabled>-请选择-</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
    <option>D</option>
  </select>
  <span>value::{{pan}}</span>
</div>
</body>
<script>
  var vm = new Vue({
    el:"#bo",
    data:{
      pan:"A"
    }
  });
</script>
</html>

组件：
组件是一组可以重复使用的模板，跟JSTL的自定义标签，Thymeleal的th：fragment差不多
第一个vue组件
采用vue-cli创建，vue模板文件的方式开发
使用vue.component()方法注册组件
Vue.component()：注册组件 pan:自定义组件的名字 template:组件的模板

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id ="bo">
  <pan></pan>
</div>
<script>
  Vue.component("pan",{
    template:'<li>Hello</li>'
  });
  var vm = new Vue({
    el:"#bo",
  });
</script>
</body>
</html>

使用props属性传递参数
注意：默认规则下props属性里的值不能为大写
v-for=“item in items”:遍历Vue实例中定义名为items的数组，并创建同等数量的组件
v-bind:path=“item”：将便利的item项绑定到组件中props定义名为item属性上

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id = 'bo'>
  <pan v-for="item in items" v-bind:path = 'item'></pan>
</div>
<script>
  Vue.component("pan",{
    props:['path'],
    template:'<li>{{path}}</li>'
  });
  var vm =new Vue({
      el:"#bo",
      data:{
        items:["java","linux","前端"]
      }
  });
</script>
</body>
</html>

3.Axios异步通信

Axios是一个开源的可以用在浏览器端和Node JS 的异步通信框架，主要作用就是实现AJAX异步通信，功能特点如下：
1.从浏览器中创建XMLHttpRequests
2.从node.js创建http请求
3.支持Promise API
4.拦截请求和响应
5.转换请求数据和响应数据
6.取消请求
7.自动转换JSON数据
8.客户端支持防御XSRF
第一个Axios应用程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-cloak]{
      display: none;
    }
  </style>
</head>
<body>
<div id="vue" >
  <div>地名： {{info.name}}</div>
  <div>地址:{{info.address.country}}--{{info.address.city}}--{{info.address.street}}</div>
  <div>链接:<a v-bind:href="info.url" target="_blank">
    {{info.url}}</a></div>
</div>
</body>
<script src = "https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm = new Vue({
    el:"#vue",
    data(){
      return{
        info:{
          name:null,
          address: {
            country:null,
            city:null,
            street:null
          },
          url:null
        }
      }
    },
    mounted(){//钩子函数
      axios
        .get('data.json')
        .then(response=>(this.info=response.data));
    }
  });
</script>
</html>

4.计算属性、内容分发、自定义事件

计算属性：
这里的计算是个函数：将计算结果缓存结果缓存起来的属性(将行为转化为静态的属性)
注意：methods和computed里的东西不能重名
methods：调用方法使用currentTime1()，需要带括号
computed：调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<!--view层,模板-->
<div id = "app">
  <p>currentTime1:{{currentTime1()}}</p>
  <p>currentTime2:{{currentTime2}}</p>
</div>
</body>
<script src ="vue.min.js"></script>
<script>
  var vm = new Vue({
    el:"#app",
    data:{
      message:"pan"
    },
    methods:{
      currentTime1:function(){
        return Date.now(); //返回一个时间戳
      }
    },
    computed:{
      currentTime2:function(){//计算属性：methods，
        this.message;
        return Date.now(); //返回一个时间戳
      }
    }
  });
</script>
</html>

结论：计算属性的主要特征就是就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销
内容分发
在vue.js中我们使用元素作为承载分发内容的出口，可以应用在组合组件的场景中
测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<!--首先定义一个代办事项的组件-->
<!--第二步 需要让代办事项的标题和值实现动态绑定 留一个插槽-->
<body>
<div id="vue">
  <todo>
    <todo-title slot="todo-title" title="title"></todo-title>
    <!--<todo-items slot="todo-items" v-for="{item,index} in todoItems" v-bind:item="item"></todo-items>-->
    <!--如下为简写-->
    <todo-items slot="todo-items" v-for="item in todoItems" :item="item"></todo-items>
  </todo>
</div>
</body>
<script src="vue.min.js"></script>
<script>
  Vue.component('todo',
                {template:'<div>\<slot name="todo-title"></slot>\<ul>\<slot name ="todo-items"></slot>\</ul>\</div>'});
  Vue.component('todo-title',{
    props:['title'],
    template:'<div>{{title}}</div>'
  });
  Vue.component("todo-items",{
    props:["item","index"],
      template:"<li>{{index+1}},{{item}}</li>"
  });
  var vm = new Vue({
    el:"#vue",
    data:{
      title:"芜湖",
      todoItems:['test1','test2','test3']
    }
  });
</script>
</html>

自定义事件
数据项在vue的实例中，删除操作要在组件中完成，vue为我们提供了自定义事件，使用this. $e mi t （^{'} 自定义事件名^{'}, 参数） * * 小结 * * 常用属性： v - i f v - e l se - i f v - e l se v - f or v - o n 绑定事件，简写 @ v - m o d e l 数据双向绑定 v - bin d 给组件绑定参数组件化：组合组件 s l o t 插槽组件内部绑定事件需要使用到 t hi s .$ emit(“事件名”,参数);
计算属性的特色，缓存计算数据

5.vue-router路由

路由：允许我们通过不同的URL访问不同的内容
功能：嵌套的路由/视图表基于Vue.js过度系统的视图过渡效果
模块化的，基于组件的路由配置细粒度的导航控制
路由参数查询通配符带有自动激活的css class的链接
自定义的滚动行为

安装：npm install vue-router --save-dev
在模块化工程中使用它，必须用过Vue.use()明确的安装路由功能
import Vue from ‘vue’
import VueRouter from ‘vur-router’
Vue.use(VueRouter);

持续更新中。。。。

万物皆可der

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue学习笔记

这里的计算是个函数将计算结果缓存结果缓存起来的属性(将行为转化为静态的属性)注意methods和computed里的东西不能重名methods调用方法使用currentTime1()，需要带括号computed调用属性使用currentTime2，不需要带括号；this.message是为了能够让currentTime2观察到数据变化而变化currentTime1{{{{el{......
复制链接

扫一扫