菜鸟教程链接

vue官方说明文档

本文章仅仅是自己对说明文档的总结，用比较容易懂的说法表示出来

让正在学习前后端分离的朋友们看完之后举一反三可以更快上手后端接口的编写

毕竟vue后面跟着个.js，如果有JavaScript基础理论上可以直接开始看了

如果是准备学习前端的话，建议直接看说明文档

目录

目录结构

基本语法

computed约等于method

watch监听

修饰符

directive自定义指令

路由

Ajax(axios)

目录结构

通过配置文档确定我们需要了解的目录。

目录/文件说明
build

项目构建文件（webpack）

config

配置目录，端口号等信息在这里设置

node_modules

npm加载的项目依赖模块

src

这里放的才是vue的 代码，如果要参考，学习的话主要看这个文件夹里面的文件，包括｛

assets：图片

components：组件文件

App.vue：项目入口文件

main.js: 项目的核心文件

｝

static

静态资源目录

test

测试目录

.xxxx文件

配置文件

index.html

首页入口文件，可以放统计代码等

package.json

项目配置文件

README.md

项目配置文档

 

 

 

 

 

 

 

 

 

 

 

 

 

 

基本语法

这里用一段包含大部分语法的代码总结

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue.js测试</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>例一</h1>
    <div v-html="message"></div>
    <div>{{message}}</div>
    <br><br>
    <h1>例二</h1>
    <input type="checkbox" v-model="ischeck">
    <div v-bind:style="{display:getCheck(ischeck)}">勾选显示/消失</div> 
    <br><br>
    <h1>例三</h1>
    <a v-on:click="ischeck2=!ischeck2" href="#">点击显示/消失</a>
    <p v-if="!ischeck2">vue.js测试</p>
    <h1>例四</h1>
    <ol><li v-for="temp in 10">循环</li></ol>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>vue.js测试</h1>',
    ischeck:false,
    ischeck2:false
  },
  methods:{
  getCheck:function(ischeck){
  return ischeck?'none':'block'
        }
  }
  });
</script>
</body>
</html>

本代码可以保存为html文件直接运行。其中有几个需要了解的语法：

1.v-html 输出html

2.｛｛variable｝｝ 输出变量

3.v-bind: 属性绑定，用了他之后，里面的值变成变量 可以直接用   :  表示

4.v-model: 变量绑定，绑定之后同步修改组件改变的数值到变量中

5.v-if 条件判断

6.v-on: 监听器，发生相对应事件的时候触发，可以直接用@表示

7.v-for 循环，写法跟主流语言的一样 value in object

8.methods 编写函数的地方

computed约等于method

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。

两者都是编写函数的地方

watch监听

var vm = new Vue({
            el: '#app',
            data: {
               watchvalue : 0
            },
            watch : {
               watchvalue :function(val) {
                  console.log(watchvalue)
               }
            }
         });
		vm.$watch('watchvalue ', function (newValue, oldValue) {
		//可以返回旧值oldValue和 新值newValue
		})

简单的监听可以直接用@，v-on来实现，$watch将会在vm.watchvalue改变的时候调用

修饰符

1.lazy 改变同步方式为在 change 事件中同步

2.number 自动转换为number类型，像date这些

3.trim 自动过滤首尾空格

directive自定义指令

Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

代码的意思是自定义一个v-focus指令，用途是组件获取焦点

路由

通过 Vue.js 可以实现多视图的单页Web应用（single page web application，SPA）。

跟spring框架里面的控制器相似

路由不是三言两语能说完的，建议想要了解的伙伴直接搜索相对应资料。

const page1 = { template: '<div>foo</div>' }
const page2 = { template: '<div>bar</div>' }//定义组件

const routes = [
  { path: '/page1', component: page1},
  { path: '/page2', component: page2}
]//设置映射 映射到对应的组件

const router = new VueRouter({routes})//创建名为router的实例，设置映射routes

const app = new Vue({router}).$mount('#app')//运行实例router在id为app的组件

Ajax(axios)

基于http协议，对接后端接口最重要的是axios

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .get('https://www.baidu.com',{
      params:{
        val1:123,
        val2:345
            }
})
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})

html获取info显示，vue负责通过axios get接口的内容返回到info中，post也是如此。

访问之后可以通过.then处理返回的文本，使用 then 时，会接收下面这样的响应：

response.data
response.status
response.statusText
response.headers
response.config

 

 

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue