【Vue】Vue基础语法知识

最新推荐文章于 2024-09-11 15:33:18 发布
最新推荐文章于 2024-09-11 15:33:18 发布
阅读量549 收藏 4
点赞数 1
分类专栏： Vue 文章标签： vue javascript js vue.js vue语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43466788/article/details/108872615
版权

文章目录

一、了解Vue.js

  1. Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
  2. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
  3. JavaScript框架
  4. 简单Dom操作
  5. 响应式数据驱动
  6. 官网：https://doc.vue-js.com/

二、Vue与MVVM

  1. 数据与视图分离：Vue数据独立在data里面，视图在template中
  2. 以数据驱动视图，只关心数据的变化，dom操作被封装
  3. MVC：Model数据→View视图→Controller控制器
  4. MVVM:Model View ViewModel 与Vue 的对应：view 对应template，vm 对应new Vue({…})，model对应data
  5. 三者的关系：view 可以通过事件绑定的方式影响 model，model 可以通过数据绑定的形式影响到view，viewModel是把model 和 view连起来的连接器

三、第一个Vue程序

步骤：
1.导入Vue.js

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.创建Vue实例对象，设置el属性和data属性
el：挂载点

  • el是用来设置Vue实例挂载（管理)的元素
  • 作用范围：el选项命中的元素及其内部的后代元素
  • 可以使用其他的选择器，建议使用ID选择器
  • 处理作用在div标签上还可以作用在其他双标签上，不能是html和body
		<script type="text/javascript">
			var app = new Vue({
			  el: '#app',
			  data: {
			    message: 'Hello Vue!'
			  }
			})
		</script>

3.使用简洁的模板语法把数据渲染在页面上

		<div id="app">
		  {{ message }}
		</div>

4.小结
完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

在这里插入图片描述
我们可以修改message的值来修改页面的内容：

在这里插入图片描述

  1. vue的7个属性
  • el属性： 用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。
  • data属性： 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。
  • template属性： 用来设置模板，会替换页面元素，包括占位符
  • methods属性： 放置页面中的业务逻辑，js方法一般都放置在methods中
  • render属性： 创建真正的Virtual Dom
  • computed属性： 用来计算
  • watch属性： watch:function(new,old){} 监听data中数据的变化 两个参数，一个返回新值，一个返回旧值。

四、Vue语法

指令式渲染

  1. v-text：不能解析标签
  2. v-html：可以解析标签
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-text="text"></span>
    <span v-html="text"></span>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            text: '<h2>Hello<h2>'
        }
    })
</script>
</body>
</html>

在这里插入图片描述

插值表达式

{{data中的数据}}

v-text和表达式的区别：

  • 默认的v-text没有闪烁的问题，插值表达式有
  • v-text会默认覆盖元素中原来的内容

v-cloak

<span v-cloak>{{msg}}</span>

v-cloak能够解决插值表达式闪烁的问题：它首先会把设置了v-cloak的标签元素隐藏dispaly:none;，当加载完毕之后，元素身上的v-cloak就会消失。

v-show

<span v-show="false">{{msg}}</span>

v-show:改变css样式中display属性，true表示block，false表示none

v-bind

绑定

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <span v-bind:title="message">
        鼠标悬停几秒钟查看此处动态绑定的提示信息!
    </span>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

在这里插入图片描述

判断

  1. v-if和v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-if="ok">YES</h2>
    <h2 v-else>NO</h2>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            ok: true
        }
    });
</script>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

  1. v-if、v-else-if和v-else
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2 v-if="type==='A'">A</h2>
    <h2 v-else-if="type==='B'">B</h2>
    <h2 v-else>C</h2>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            type: 'A'
        }
    });
</script>
</body>
</html>

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <li v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </li>
</div>

<script>
    var vm = new Vue({
        el: "#app",
        data: {
            items: [
                {message: '简介'},
                {message: '数据'},
                {message: 'Hello'}
            ]
        }
    });
</script>
</body>
</html>

在这里插入图片描述

绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button v-on:click="sayHi">按钮</button>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '好好学习'
        },
        methods: { //方法必须定义在Vue的Methods对象中
            sayHi: function () {
                alert(this.message);
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

双向绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <input type="text" v-model="message">{{message}}

</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            message: '123'
        }
    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    性别:
    <input type="radio" name="radiosex" value="男" v-model="sex">
    <input type="radio" name="radiosex" value="女" v-model="sex">

    <!--在这里显示选择了哪一个-->
    <p>
        性别选择了：{{sex}}
    </p>

</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            sex: ''
        }
    })
</script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    下拉框：
    <select v-model="selected">
        <option value="" disabled>--请选择--</option>
        <option>A</option>
        <option>B</option>
        <option>C</option>
    </select>

    <span>值:{{selected}}</span>
</div>

<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            selected: ''
        }
    })
</script>
</body>
</html>

在这里插入图片描述

五、组件

基本格式：

    Vue.component("组件名",{
        props: ['参数'],
        template: '<li>{{参数}}</li>'
    });

  1. 如果不需要传递参数，只是简单的组件复用，可以去掉props

  2. 要用 v-bind:参数名="data"来绑定参数的值为data属性中的值

  3. 注意template:中的容器只有一个父元素，不能有多个，可以用一个div包裹。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <hello v-for="item in items" v-bind:hi="item" ></hello>

</div>

<script type="text/javascript">

    Vue.component("hello",{
        props: ['hi'],
        template: '<li>{{hi}}</li>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            items: ['JAVA','HTML','PHP'],
        }
    })
</script>
</body>
</html>

在这里插入图片描述

六、计算属性

methods和computed

  1. computed会基于响应数据缓存，methods不会缓存
  2. diff之前先看data里面的数据是否发生变化，如果没有变化computed的方法不会被执行，但methods里面的方法会执行
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <p>当前时间:{{currentTime()}}</p>
    <p>当前时间:{{currentTime2}}</p>

</div>

<script type="text/javascript">

    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'Hello'
        },
        methods: {
            currentTime: function () {
                return Date.now();//返回当前时间
            }
        },
        computed: {
            currentTime2: function () {
                return Date.now();//返回当前时间
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

七、插槽

  1. 插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的<slot></slot>标签。
  2. 测试：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <todo>
            <slot1 slot="slot1" v-bind:item="item"></slot1>
            <slot2 slot="slot2" v-for="i in item2" v-bind:item2="i"></slot2>
        </todo>
    </div>
</div>

<script type="text/javascript">

    Vue.component('todo',{
        template: '<div>' +
            '<slot name="slot1"></slot>' +
            '<ul>' +
            '<slot name="slot2"></slot>' +
            '</ul>' +
            '</div>'
    });


    Vue.component('slot1',{
        props: ['item'],
        template: '<p>{{item}}</p>'
    });

    Vue.component('slot2',{
        props: ['item2'],
        template: '<li>{{item2}}</li>'
    });

    var vm = new Vue({
        el: '#app',
        data: {
            item: '课程',
            item2: ['PHP','JAVA','JS']
        }
    })
</script>
</body>
</html>

八、自定义事件

父组件使用props传递数据给子组件，子组件通过自定义事件跟父组件通信。

this.$emit('自定义事件的名称',自定义事件处理程序需要的参数1，参数2，参数3);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>
        <todo>
            <slot1 slot="slot1" v-bind:item="item"></slot1>
            <!-- v-bind:props:给子组件传值 -->
            <!--  v-on:自定义事件   子组件事件绑定父组件事件 -->
            <slot2 slot="slot2" v-for="(i,index) in item2" v-bind:item2="i"
                   v-bind:index="index" v-on:remove="removeItem(index)"></slot2>
        </todo>
    </div>
</div>

<script type="text/javascript">

    Vue.component('todo',{
        template: '<div>' +
            '<slot name="slot1"></slot>' +
            '<ul>' +
            '<slot name="slot2"></slot>' +
            '</ul>' +
            '</div>'
    });


    Vue.component('slot1',{
        props: ['item'],
        template: '<p>{{item}}</p>'
    });

    Vue.component('slot2',{
        props: ['item2','index'],
        //只能绑定当前组件的方法
        template: '<li>{{index}}---{{item2}}  <button @click="remove(index)">删除</button></li>',
        methods: {
            remove: function (index) {
                this.$emit('remove',index);
            }
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            item: '课程',
            item2: ['PHP','JAVA','JS']
        },
        methods: {
            removeItem: function (index) {
                console.log(this.item2[index]+"已删除");
                this.item2.splice(index,1);//删除数组中的第index个
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

九、Axios异步通信

  1. 官网：http://www.axios-js.com/

  2. 测试

（1）新建一个data.json数据：

{
  "name":"高朗",
  "url": "https://blog.csdn.net/qq_43466788",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "含光门",
    "city":"陕西西安",
    "country": "中国"
  },
  "links": [
    {
      "name": "CSDN",
      "url": "https://blog.csdn.net/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

（2）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.js"></script>
</head>
<body>
<div id="app">
    <span>{{info.name}}</span>
    <a v-bind:href="info.url">博客地址</a>
    <span>{{info.page}}</span>
    <span>{{info.isNonProfit}}</span>
    <span>{{info.address.country}}</span>
    <div v-for="(link,index) in info.links">
        <p v-text="index"></p>
        <span v-text="link.name"></span>
        <a v-bind:href="link.url" v-text="link.url"></a>
    </div>

</div>

<script type="text/javascript">


    var vm = new Vue({
        el: '#app',
        data(){
          return{
              info: {
                  //请求的返回参数合适,必须和 json字符串一样
                  name: null,
                  url: null,
                  page: null,
                  isNonProfit: null,
                  address: {
                      street: null,
                      city: null,
                      country: null
                  },
                  links: [
                      {
                          name: null,
                          url: null
                      },
                      {
                          name: null,
                          url: null
                      },
                      {
                          name: null,
                          url: null
                      }
                  ]
              },
          }
        },
        mounted(){ //钩子函数   链式编程
            axios.get('../data.json').then(response=>(this.info=response.data));

        }
    })
</script>
</body>
</html>

在这里插入图片描述

章帮一（江南大学）
关注
专栏目录
Vue基础语法
qq_52262541的博客
04-10 1130
Vue模板语法有2大类： 1.插值语法： 功能：用于解析标签体内容。 写法：{{XXX}}，XXX是Js表达式，且可以直接读取到date中的所有属性。 2.指令语法： 功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）。 举例：v-bind:href=“XXX” 或简写为：href=“XXX”,XXX同样要写js表达式，且可以直接读取到date中的所有属性。 备注：Vue中有很多的指令，且形式都是：v-???,此处我们只是拿v-bind举个例子。 Vue中有2种数据绑定的方式： 1.单向绑定
Vue的基础语法
m0_65849649的博客
03-21 314
1.什么是vue.js 1、Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 2、Vue.js是前端的主流框架之一，和Angular.js、React.js一起，并成为前端三大主流框架！ 二、MVC与MVVM的区别 1、MVC是后端的分层开发概念; 2、MVVM是前端视图层的概念，主要关注于视图层分离，也就是说：MVVM把前端的视图层，分为了三部分Model、View、...
Vue——基础语法知识
虽菜但瘾
01-28 253
初识Vue 简介 作为前端三大框架之一并且面向国内的大多数开发者来说，vue是绝对要去学会的一个知识点。vue整体简小灵活，在构建项目框架的时候能够快速搭建而且与众多的第三方库整合，因此在社区维护和容错调试时都能方便找到问题的所在之处。 安装 平时测试用例和学习可以使用引用 和 CDN 的方式： 引用：<script src="../someWhere/vue.js"></script> CDN：<script src="https://cdn.jsdelivr.net
VUE基础语法
热门推荐
gaston的博客
07-13 1万+
vue基础语法：首先做的是创建一个js文件,vue.js(官网学习教程里有),此文件和一下各个文件在同一级目录：/*! * Vue.js v2.5.16 * (c) 2014-2018 Evan You * Released under the MIT License. */ (function (global, factory) { typeof exports === 'object...
vue基础语法
LIN_17970的博客
08-01 162
vue基础语法1.插值2.指令3. 过滤器4.计算属性与监听属性 1.插值 1.1 文本 {{msg}} 1.2 html 使用v-html指令用于输出html代码 1.3 属性 HTML属性中的值应使用v-bind指令 1.4 表达式 Vue提供了完全的JavaScript表达式支持 {{str.substr(0,6).toUpperCase()}} {{ number + 1 }} {{ ok...
vue基础语法练习源码
12-09
在这个名为"vue基础语法练习源码"的资源中，我们将会探索一些Vue的基础概念和语法，包括HTML文件中的Vue应用实践，如过滤器、自定义插件以及列表渲染等。 首先，让我们深入了解Vue的基础语法。Vue实例是整个应用的...
day01_Vue01-基础语法3.ppt
01-15
vue 基础知识点
vue3基础语法&示例demo.zip
02-21
要学习这些知识点，你可以打开压缩包中的“vue3基础语法&示例demo.docx”文件，它很可能包含了详细的解释和实例代码。通过阅读文档和尝试运行示例，你将能够深入理解Vue3的新特性和使用方法。实践是最好的老师，因此...
vue3.0基础语法的练习笔记
02-07
本笔记对 Vue 3.0 的基础语法进行了实践和总结，包括 Vite 的使用、Hot Module Replacement、Dynamic Import 和 Code Splitting、Setup 函数、Ref 和 Reactive 等知识点。通过学习这些基础语法，可以更好地使用 Vue ...
js中【Worker】相关知识点详细解读
最新发布
2301_79858914的博客
09-11 856
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值