首页 > 其他分享 >万字血书Vue—走近Vue

万字血书Vue—走近Vue

时间:2023-03-17 10:23:10浏览次数:57  
标签:万字 el Vue 血书 框架 vue https data

image

Vue是什么?

Vue是一套用于构建用户界面渐进式JavaScript框架

  • 构建用户界面:用vue往html页面中填充数据

  • 渐进式:Vue可以自底向上逐层的应用,从轻量小巧核心库的简单应用,到引入各式各样插件的复杂应用。

  • 框架:一整套现成的解决方案,遵守框架的规范,学习框架,就是学习框架中的规定用法

谁开发的?

https://zhuanlan.zhihu.com/p/58335278

Vue特点

  1. 采用组件化模式,提高代码复用率,且让代码更好维护。
  2. 声明式编码,开发人员无需操作DOM,提高开发效率。

Vue文档

https://v2.cn.vuejs.org/

https://cn.vuejs.org/

起步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h1>Hello World!</h1>
        <h1>Hello {{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止 vue 在启动时生成生产提示
        //创建Vue实例
        //容器和实例 一一对应
        const vm=new Vue({
            el:'#root',//用于指定当前Vue为哪个容器服务,值通常为css选择器字符串,不能基于body和html初始化
            data:{//data中用于存储数据,供el指定的容器使用
                name:'张三',
            }
        })
    </script>
    
</body>
</html>

el和data的第二种写法:

<body>
    <div id="app">{{username}}</div>
    #导入脚本文件
    <script src="vue.js"></script>
    <script>
        const vm=new Vue({
            data(){ //此处this指向vue实例
            return{
                   username:'zs'
            }
            }
        })
        vm.$mount=('#app')//挂载
        //data:对象式和函数式,组件时只能用后者,不能用箭头函数this会指向window而不是vue
    </script>
</body>

标签:万字,el,Vue,血书,框架,vue,https,data
From: https://www.cnblogs.com/gfhcg/p/17222228.html

相关文章

  • vue3 js 学习笔记
    Vue3-js学习笔记目录Vue3-js学习笔记目录前言reactive数据绑定事件绑定生命函数周期计算属性-computedpropsemit-自定义事件ref-获取元素及子组件watchvu......
  • vue转uniapp踩坑记录
    1、subpackage下的组件其他包不能import2、tarbar下的路由页面mounted方法只在小程序初始化的时候调用一次,下次再进入时调用onshow方法3、使用表单组件设置必填项时,必须......
  • electron-ant-design-vue 问题汇总
    问题一:Invalidattempttospreadnon-iterableinstance.Inordertobeiterable,non-arrayobjectsmusthavea[Symbol.iterator]()method.  解决办法:data-......
  • 下载vue-element-admin时的问题
    1、vue-element-admin官网地址介绍|vue-element-admin(gitee.io)2、转载于(安装vue-element-admin时npminstall报错:Pleasemakesureyouhavethecorrectaccessri......
  • Vue.js 收集表单数据
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>收集表单数据</title> <scripttype="text/javascript"src="../js/vue.js"></script> </h......
  • 万字长文详解声明式配置发展历程
    零、前言​文本仅用于澄清声明式配置技术概述,KCL概念以及核心设计,以及与其他配置语言的对比。一、声明式配置概述​1.1配置的重要性​软件不是一成不变的,每天有成......
  • Vue.js 总结Vue监视数据
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>总结数据监视</title> <style> button{ margin-top:10px; } </style> <!--......
  • Vue.js 更新时的一个问题&Vue监测数据改变的原理(p33~p34)
    视频33视频34更新时的一个问题<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>更新时的一个问题</title> <scripttype="text/javascript"src......
  • Vue.js 列表渲染-列表排序
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>列表排序</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......
  • Vue.js 列表渲染-列表过滤
    视频<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"/> <title>列表过滤</title> <scripttype="text/javascript"src="../js/vue.js"></script> </head>......