vue零基础三十分钟看懂别人的开源项目 vue快速入门

最新推荐文章于 2024-09-23 22:03:38 发布

[meng

最新推荐文章于 2024-09-23 22:03:38 发布

阅读量6k

点赞数 8

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_42453905/article/details/103173259

版权

vue 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

菜鸟教程链接

vue官方说明文档

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

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

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

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

目录结构

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

目录/文件	说明
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

[meng

关注

8
点赞
踩
69

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录