vue快速上手

已于 2022-07-24 18:04:36 修改
阅读量946 收藏 4
点赞数 1
分类专栏： 前端 文章标签： vue.js javascript 前端
于 2022-07-21 18:11:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53009955/article/details/125917998
版权

目录

vue快速上手

vue简介

第一个vue程序

vue的基本语法

Vue的七大属性

vue双向绑定

什么是双向绑定

实现

vue的组件

什么是vue的组件

实现

vue:Axios异步通讯

计算属性

插槽 slot标签

自定义事件

遵守soc原则

vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
​
</head>
<body>
<!--view层 模板-->
<div id="app">
    {{message}}
</div>
   
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        //model层：数据
        data:{
            message:"hello,vue!"
        }
    });
</script>
</body>
</html>

效果

 

vue的基本语法

​
<span v-bind:title="message">
        鼠标悬停几秒钟查看动态绑定提示信息
    </span>

v-bind等被成为指令。前缀v-开头的表示Vue的特殊属性

v-if 判断

<body>
​
<div id="app">
<!--  <h1 v-if="ok">yes</h1>-->
<!--  <h1 v-else>no</h1> -->
  <h1 v-if="type=='A'">A</h1>
  <h1 v-else-if="type=='B'">B</h1>
  <h1 v-else>C</h1>
</div>
​
<!--    1.导入vue.js-->
​
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
      ok: true,
      type: 'A'
    }
  });
</script>
​
</body>

v-for循环

​

<body>
<div id="app">
    <h1 v-for="(item,index) in items">
        {{item.message}}---{{index}}
    </h1>
</div>
​
​
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    data:{
        items: [
            {message: '张三'},
            {message: '李四'}
        ]
    }
  });
</script>
</body>

Vue的七大属性

  • el属性

    • 用来指示Vue编译器从什么地方开始解析Vue的语法，可以说是一个占位符。

  • data属性

    • 用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

  • methods属性

    • 放置页面中的业务逻辑，js方法一般都放置在methods中

  • template属性

    • 用来设置模板，会替换页面元素，包括占位符。

  • render属性

    • 创建真正的virtual Dom 用js来渲染组件

  • computed属性

    • 用来计算

  • watch属性

    • watch:funtion(new,old){}

    • 监听data中的数据的变化

    • 两个参数，一个返回新值，一个返回旧值

vue双向绑定

什么是双向绑定

vue是一个mvvm框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。

实现

<body>
​
<!--view层 模板-->
<div id="app">
  请输入文本：<input type="text" v-model="message"> 你输入的：{{message}}</br>
  性别：<input type="radio" name="sex" value="1" v-model="checked">男
  <input type="radio" name="sex" value="0" v-model="checked">女
  <p>
    选着了谁:{{checked==1?'男':'女'}}
  </p>
  下拉框：
  <select v-model="select">
    <option value="" disabled>----请选择----</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  选择的是：<span>{{select}}</span>
</div>
​
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  var vm = new Vue({
    el: "#app",
    //model层：数据
    data:{
      message: "123",
      checked: '1',
      select: ''
    }
  });
</script>
</body>

屏幕的显示数据和用户的操作一致

vue的组件

什么是vue的组件

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

例如我们网站存在头部导航，侧边菜单框，共享的内容区等。这些东西都可以是组件。

实现

<body>
<!--view层 模板-->
<div id="app">
​
  <hello v-for="item in items" v-bind:item="item"></hello>
​
</div>
​
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
  //定义一个vue组件Component
  Vue.component("hello",{
    props: ['item'],
    template:
            // '<h1>今天天气不错，hello vue！</h1>'+
            '<li>{{item}}</li>>'
  });
  var vm = new Vue({
    el: "#app",
    data: {
      items: ["java","vue","前段"]
    }
  });
</script>
</body>

Vue.component（组件，组件对象）：定义组件

结构体有两个属性props：元素，template：模板

v-for="item in items"：遍历vue里面的实例数组，同时创建相同数量的组件

v-bind:item="item"：将遍历的元素绑定到组件的props的定义为item属性中；=号左边是props的item属性，右边是遍历的属性

vue:Axios异步通讯

data.json

{
  "name": "张三",
  "url": "https://www.baidu.com",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "stree": "1",
    "city": "2",
    "country": "chain"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "狂神说",
      "url": "https://www.kuangstudy.com/"
    }
  ]
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--V-cloak:解决闪烁问题-->
    <style>
        [v-coack]{
          display: none;
        }
    </style>
<body>
​
<div id="vue" v-cloak>
    <div>{{info.name}}</div>
    <div>{{info.address.country}}</div>
    <a v-bind:href="info.url">点我</a>
</div>
​
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  var vm=new Vue({
    el: "#vue",
      //data:  属性：vm
      data(){
        return{
            //请求返回的参数必须和json一样
            info:{
                name: null,
                address: {
                    stree: null,
                    city: null,
                    country: null
                },
                url: null
            }
        }
      },
    mounted(){
      axios.get('../data.json').then(response=>(this.info=(response.data)));
    }
  });
</script>
</body>
</html>

通过axios的异步请求get获取到data.json的数据然后赋值到data方法的info里面，然后在div就可以取出来

计算属性

computed： 计算出来的结果保存在属性中~，内存里面，虚拟Dom里面

<body>
​
<div id="app">
    <p>{{currentTime1()}}</p></br>
    <p>{{currentTime2}}</p>
</div>
​
​
​
<!--    1.导入vue.js-->
​
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            message:"hello,vue!"
        },
        methods: {
            currentTime1: function () {
                return Date.now();//返回时间戳
            }
        },
        computed: {
            currentTime2: function () {//非方法存在缓存，方法名不能和methods里面的一样，否则使用methods里面的
                return Date.now();
            }
        }
    });
</script>
​
</body>
currentTime2时间戳不变，currentTime1在变，说明currentTime2保存到内存中了

插槽 slot标签

<body>
​
<div id="app">
    <todo>
        <todo-title slot="todo-title" :title="title"></todo-title>
        <todo-items slot="todo-items" v-for="item in todoItems" v-bind:item="item"></todo-items>
    </todo>
</div>
​
​
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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'],
        template: '<li>{{item}}</li>'
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title: '书籍列表',
            todoItems: ['Java','Linux','Python']
        },
    });
</script>
</body>

在第一个模块todo里面有两个插槽

在第二个和第三模板，加入了动态属性，将其插入到第一个模板中

自定义事件

$emit自定义事件

<body>
​
<div id="app">
    <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" :indedx="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
    </todo>
</div>
​
​
<!--    1.导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    //slot:插槽
    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}}------{{item}} <button v-on:click="remove">删除</button></li>',
        methods: {
            remove: function (index){
                // alert("111")
                this.$emit('remove',index);
            }
        }
    });
    var vm = new Vue({
        el: "#app",
        data:{
            title: '书籍列表',
            todoItems: ['Java','Linux','Python']
        },
        methods: {
            removeItems: function (index) {
                console.log("删除了"+this.todoItems[index]+"KO")
                this.todoItems.splice(index,1);//一次删除一个元素
            }
        }
    });
</script>
</body>

通过插槽里的模块里面的方法通过$emit和VM的方法进行关联，然后能控制vm里面Data的数据

官网链接中文文档：条件渲染 | Vue.js

官网链接：Vue.js 介绍 — Vue.js 中文文档

总要学点啥
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue快速上手&工程化.pdf
06-01
vue快速上手教程，vue实战项目工程化的思想，带你走入不知道的vue
vue3快速上手.md
01-06
- Vue3可以更好的支持TypeScript 4.新的特性 1. Composition API（组合API） - setup配置 - ref与reactive - watch与watchEffect - provide与inject 2. 新的内置组件 - Fragment - Teleport - Suspense 3. ...
深入浅出Vue基本语法：让你快速上手Vue框架
七一
04-26 1583
单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在一个HTML页面中，仅在该HTML页面初始化时加载相应的资源（HTML、JavaScript、CSS）。一旦页面加载完成了，单页面应用程序不会因为用户的操作而进行页面间的重新加载或跳转。因为只有一个 html 页面，不需要页面间的跳转，而是利用JavaScript动态的变换HTML的内容，从而实现页面与用户的交互。用于解析标签体内容。{{xxx}}xxx是。
Vue的快速入门
qq_63534255的博客
10-17 442
百度一下{{url}}-->案例效果：在输入框中输入网址，动态改变超链接的地址,并动态的将输入框中的信息展示出来。点我点我
【狂神说Java】Vue最新快速上手教程通俗易懂
2401_84093019的博客
04-08 685
Vue.js是一个MV VM框架， 即数据双向绑定， 即当数据发生变化的时候， 视图也就发生变化， 当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单项的，这时就会和双向数据绑定有冲突。组件是可复用的Vue实例， 说白了就是一组可以重复使用的模板。
Vue快速上手
游星的博客
01-03 316
vue-cli、webpack、vue-router基础使用
Vue快速上手教程
qq_32073629的博客
07-19 854
Vue)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。官网地址。...
如何快速上手vue框架
03-01 332
总之，要快速上手Vue框架，需要注重理论和实践相结合，通过不断地练习和实践，逐渐掌握Vue的各种功能和技巧。查阅文档和教程：除了官方文档，还可以查阅一些高质量的Vue教程和博客，深入学习Vue的高级用法和最佳实践。参与社区和开源项目：加入Vue的社区，参与讨论和交流，了解最新的Vue动态和技术发展方向。实践练习：通过实践编写小型的Vue项目，如TodoList、购物车等简单的应用，来加深对Vue的理解和掌握。学习Vue的基本概念和特性：了解Vue是什么，它的核心功能和特点是什么，以及与其他框架的区别。
Vue3快速上手.md
01-21
这个是禹神Vue3的最新笔记！！！
Vue3快速上手-vue3详细基础教程
最新发布
06-20
Vue3快速上手,vue3详细基础教程,涵盖了知识点讲解和案例的使用讲解，makdown格式，是一份不可多得的学习资料
快速上手vue的登录界面(最新版)
热门推荐
呼啦啦啦啦啦的博客
07-22 3万+
快速上手vue的登录界面(最新版)
Vue 项目快速上手
XWenXiang的博客
06-30 1030
首先需要安装的是 node.js ，官方下载地址：Node.js 中文网 安装比较简单，一直点就行，下载完自带 node、npm 。最后需要加入环境变量。 使用 npm 下载 Vue CLI 其是用于快速 Vue.js 开发的命令行界面，也就是脚手架。 但是使用 npm 安装第三方模块，速度比较慢，使用国内镜像。 临时使用修改npm源 永久修改npm源 安装 cnpm 查看当前默认安装路径 修改 npm 安装路径 注意点 Vue CLI 的包名称由 改成了 。 如果你
一文快速上手Vue（上）
一个菜鸡的博客
10-17 765
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不 同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上 手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库 结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。官网：https://cn.vuejs.org/尤雨溪，Vue.js 创作者，Vue Technology 创始人，致力于 Vue 的研究开发。
Vue基础知识点加案例
shuaigelingzi的博客
09-19 654
Vue入门笔记基础篇Vue基础知识点el:挂载点data:数据对象本地应用v-text: 设置标签的文本值(textContent)v-html:设置标签的innerHTMLv-on:为元素绑定事件计数器--案例v-show:根据表达式的真假，切换元素的显示和隐藏v-if:根据表达值的真假，切换元素的显示和隐藏(操纵dom元素)v-bind:设置元素的属性(比如:src,title,class)实例-图片切换v-forv-on（补充）:传递自定义参数，事件修饰符 基础篇 Vue基础知识点 el:挂载点 e
vue框架快速入门
Java学不会的博客
05-06 1816
MVVM（Model-View-ViewModel）是一种软件设计模式，由微软WPF（用于替代WinForm，以前就是用这个技术开发桌面应用程序的）和Silverlight（类似于Java Applet，简单点说就是在浏览器上运行WPF）的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式。由John Gossman（同样也是WPF和Sliverlight的架构师）与2005年在他的博客上发表。
Vue - 快速入门，这一套就够了！（Vue core + 案例 + 效果演示）
CYK_byte的博客
10-16 8793
前置条件：掌握 HTML、CSS、JavaScript、AJAX.工具：VsCode.插件：Live Server（浏览器实时预览）Ps：建议都提前下载下来，没网的时候也能用.
【Vue】快速入门
你不来，再美的天地，都狼藉 ~
03-24 1611
一文带你从HelloWorld认识Vue框架，深刻理解！
最全的 Vue3 快速上手指南【值得收藏】
嘿嘿
03-17 1万+
Vue3简介 面临的问题：随着功能的增长，复杂组件的代码变得难以维护，Vue3就随之而来，TypeScript使用的越来越多，Vue3就是TS写的所以能够更好的支持TypeScript 在这里介绍就这么简单 vue2的绝大多数的特性 在Vue3都能使用，毕竟Vue是渐进式的 响应式原理进行使用Proxy实现，v-model可以传参了等等新特性 基础工作 使用Vue3的话，那么必须通过使用构建工具创建一个Vue3项目 安装 vue-cli #npm npmi...
【Vue】快速掌握Vue的基本使用
Daears的博客
09-23 381
Vue (读音/vju/, 类似于view)是一套用于构建用户界面的渐进式JavaScript框架，发布于2014年2月。与其它大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库(如: vue-router: 跳转，vue-resource: 通信，vuex:管理)或既有项目整合
vue 怎么快速上手canvas
04-25
很高兴回答您的问题！要快速上手使用Vue和Canvas进行开发，可以按照以下步骤进行： 1. 首先，在Vue项目中安装`vue-konva`插件，这是一个基于原生Canvas的Vue插件，可以更加方便地进行画布操作。 2. 接下来，在Vue组件中引入并使用`vue-konva`，例如： ``` <template> <v-stage> <v-layer> <v-rect /> </v-layer> </v-stage> </template> <script> import VueKonva from 'vue-konva'; export default { name: 'MyCanvasComponent', components: { 'v-stage': VueKonva.Stage, 'v-layer': VueKonva.Layer, 'v-rect': VueKonva.Rect, }, }; </script> ``` 在上面的代码中，我们创建了一个包含一个矩形的画布组件。 3. 接下来，您可以使用原生Canvas API对您的画布进行进一步的定制，例如： ``` <template> <v-stage> <v-layer> <v-rect /> </v-layer> </v-stage> </template> <script> import VueKonva from 'vue-konva'; export default { name: 'MyCanvasComponent', components: { 'v-stage': VueKonva.Stage, 'v-layer': VueKonva.Layer, 'v-rect': VueKonva.Rect, }, mounted() { const stage = this.$refs.stage.getStage(); const layer = this.$refs.layer.getLayer(); const rect = this.$refs.rect.getKonvaNode(); // 使用原生Canvas API对画布进行定制 rect.fill('red'); layer.draw(); }, }; </script> ``` 在上面的代码中，我们使用`$refs`访问了我们的组件的各个部分，以及使用原生Canvas API将矩形的填充颜色更改为红色。 希望这些步骤对您有所帮助！如果您有其他问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值