前端框架vue

最新推荐文章于 2024-06-28 19:52:17 发布

@十里~顾清欢

最新推荐文章于 2024-06-28 19:52:17 发布

阅读量636

点赞数

文章标签： vue.js 前端框架

本文链接：https://blog.csdn.net/weixin_46657047/article/details/122350297

版权

本文介绍了Vue.js的基本概念，包括其在前后端分离中的跨域处理、项目优化方法，以及核心指令如v-text、v-html、v-on等的使用。此外，还演示了如何通过CDN引入Vue并创建基础实例，以及处理v-model双向数据绑定。

摘要由CSDN通过智能技术生成

1.Vue简介

    是一套用于构建用户界面的渐进式框架，自底层向上应用，
Vue的核心库只关注视图层，容易入门，可以和第三方库或者已有的项目进行整合，
可以做复杂的单页应用。 简单的说，vue是一套前端的开发框架，
vue是目前三大主流的框架之一，其他两个框架是:React、Angular。

(1)前后端分离时会报错:

<1>Access-Control-Allow-Origin 跨域问题     

   跨域的概念:后台服务为了保护自己的接口，将不是同一种请求方式，
以及不同一个IP,以及不是同端口号的，拒绝访问;

解决方法:  

1.后台来解决  : 接口添加@CrossOrigin注解

 2.前台来解决 

 3.使用nginx来解决

(2)项目优化

在main.js中配置

1.下载axios
npm install axios
2.统一管理axios
import axios from 'axios';
3.设置全局使用axios
Vue.prototype.$axios=axios;
4.设置axios请求的默认的ip以及端口号
axios.defaults.baseURL="http://localhost:8080"

2.Vue基本使用概念

(1)基本使用步骤

<1>导入开发版的Vue.js

<2>创建Vue实例对象,设置el属性和data属性

<3>使用简介的模板语法把数据渲染到页面上

(2)el: 挂载点

    Vue会管理el选项命中的元素及其内部的后代元素,可以使用其他的选择器,
但是建议使用id选择器,可以使用其他双标签,但是不能使用HTML和BODY.

(3)data: 数据对象:

    Vue中用到的数据定义到data中,data中可写复杂类型的数据,
渲染复杂类型数据遵守js的语法即可

(4)methods书写格式:

methdos:{}

(5)mounted书写格式:


mounted(){

    this.findAll() 

};  

注意:和methods同级,类似于$(function),相当于页面载入事件


作用:什么时候触发findAll() ,页面加载的时候,触发这个方法:vue的页面载入事件

3.Vue的基本指令

(1)v-text : 设置标签的文本值

    v-text指令的作用是:设置标签的内容<textContent>,默认写法会替换全部内容,
使用差值表达式可以替换指定内容;内部支持写表达式.

(2)v-html : 设置标签的innerHTML属性

v-html指令的作用是设置元素的innerHTML属性,内容中有html结构会被解析为标签,

v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html

(3)v-on : 为元素绑定事件

    v-on指令的作用是为元素绑定事件,事件名不需要写on,指令可以简写为@,

绑定的方法定义在methods属性中,方法内部通过this关键字可以访问定义在data中的数据.

(4)v-show : 根据表达式的真假切换元素的显示与隐藏

    v-show指令的作用是根据真假切换元素的显示状态,原理是修改元素的display,实现显示

隐藏,指令后面的内容,最终都会解析为布尔值,值为true元素显示,值为false元素隐藏,数据

改变之后,对应元素的显示状态会同步更新.

(5)v-if : 根据表达式的真假,切换元素的显示和隐藏,操纵dom元素

   v-if指令的作用是根据表达式的真假切换元素的显示状态,本质是通过

操纵dom元素来切换显示状态,表达式值为true,元素存在于dom树种,值

为false,从dom树中移除,频繁的切换使用v-show,反之使用v-if,前者的
切换消耗小.

(6)v-bind : 设置元素的属性,例如src,title等

   v-bind指令的作用是为元素绑定属性,完整的写法是 v-bind:属性名,

简写可以省略v-bind,只保留 :属性名,需要动态的增删class建议使用对象

的方式

(7)v-for : 遍历使用,根据数据生成列表结构

    v-sfor指令作用是根据数据生成列表结构,数组经常和v-for结合使用,语法是 

(item,index) in 数据;item和index可以结合其他指令一起使用,数组长度的

更新会同步到页面上,是响应式的.

(8)v-model : 获取和设置表单元素的值,为双向数据绑定

   v-model指令的作用是便捷的设置和获取表单元素的值,绑定的数据

会和表单元素值相关联,一边改变另一边也会随之改变.

4.Vue的使用
(1)cdn方式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
      //引入vue的js
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <body>
        <div id="app">
            {{message}}
        </div>
    </body>
    <script>
        new Vue({
                代表vue所接管的区域，里边是区域的id值
            el:'#app',
                数据绑定
            data:{
                message: "hello word111",
            },
                声明执行的方法
            methods:{
                sub:function(){}
            },
            mounted(){} 相当于页面载入事件
        })
    </script>
</html>