天道酬勤,学无止境

vue输出语句_原生JS如何输出Vue中的data数据

从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。

学完本课程可以做一些基本的实战项目

学习Axios的使用

学习vue的基础语法

学习vue和后台数据库的交互

00-课程说明

【Vue起步】2

01-第一个Vue页面

02-VUE.JS框架的引入和安装

03-Vue.js起步-属性的定义和使用

04-Vue.js起步-函数的定义和使用

05-Vue中data数据的第2种定义方式

06-Vue中data数据的改变和设置方式1

07-Vue中data数据的改变和设置方式2

08-原生JS如何输出Vue中的data数据

09-Vue中的系统属性的使用

【Vue.js模板数据绑定和form元素】3

10-数据绑定-文本插值

11-数据绑定之v-html指令

12-Vue.js中提供了完全的JavaScript表达式支持

13-数据绑定之实现双向数据绑定v-model指令(input应用)

14-数据绑定之v-model指令-textarea中应用

15-数据绑定之v-model指令-select下拉列表应用

16-数据绑定之v-model指令-checkbox单选应用

17-数据绑定之v-model指令-checkbox多选应用

18-数据绑定之v-model指令-radio单选应用

19-Vue.js中的指令

20-数据绑定-使用v-bind指令绑定HTML属性值和参数的使用(链接a应用)

21-Vue.js中过滤器的使用

【Vue.js条件语句】4

22-Vue.js中的条件判断语句 v-if 指令

23-Vue.js中v-show指令

24-Vue.js中v-show指令和v-if 指令的区别

25-Vue.js中v-else指令

26-Vue.js中v-else-if指令

【Vue.js 循环语句】5

27-Vue.js中 v-for 循环指令-简易数组的使用

28-建立新的空白框架

29-Vue.js中 v-for 循环指令-对象的迭代显示

30-Vue.js中 v-for 循环指令-对象迭代显示中参数的使用

31-Vue.js中 v-for 循环指令-循环显示整数和九九乘法表

32-Vue.js中 v-for 循环指令-对象数组的内容显示

33-如何使用for循环和if语句处理对象中嵌套对象

【Vue.js 样式绑定】6

34-Vue.js样式-class属性绑定单个样式

34-Vue.js样式-class属性绑定单个样式(补充)

34-Vue.js样式-class属性绑定单个样式(补充2)

35-Vue.js样式-class属性绑定多个样式

36-Vue.js样式-class属性绑定数据里的一个对象

37-Vue.js样式-class属性绑定一个数组

37-Vue.js样式-class属性绑定一个数组(补充)

38-Vue.js样式-class属性通过三目运算符绑定

39-Vue.js样式-style(内联样式)

40-Vue.js样式-style(内联样式)-绑定样式对象

41-Vue.js样式-style(内联样式)-绑定样式数组

【Vue.js 事件处理器】7

42-Vue.js-事件处理器v-on指令

43-v-on指令函数的两种定义方式

44-Vue.js-事件中如何读取data里面的数值

45-Vue.js中指令对应函数参数的几种使用方式

【Vue.js 监听属性】8

46-Vue.js 监听属性-普通的watch实现计数器(原42)

47-Vue.JS-监听属性-千米与米之间的换算

48-Vue.JS-监听属性-简单的购物车

【Vue.js 中Form表单数据提交】9

49-Vue.JS-表单-实战-全选与取消全选

50-Vue.JS-表单-实战-获取要提交的数据

【Vue.js 中如何与数据库后台交互】10

51-Axios介绍

52-Vue.JS-表单-实战-如何提交数据到远程服务器

53-Vue.JS-表单-实战-如何获取服务器的数据

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • vue中data定义数字类型_Vue中data数据的第2种定义方式
    从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。 学完本课程可以做一些基本的实战项目 学习Axios的使用 学习vue的基础语法 学习vue和后台数据库的交互 00-课程说明 【Vue起步】2 01-第一个Vue页面 02-VUE.JS框架的引入和安装 03-Vue.js起步-属性的定义和使用 04-Vue.js起步-函数的定义和使用 05-Vue中data数据的第2种定义方式 06-Vue中data数据的改变和设置方式1 07-Vue中data数据的改变和设置方式2 08-原生JS如何输出Vue中的data数据 09-Vue中的系统属性的使用 【Vue.js模板数据绑定和form元素】3 10-数据绑定-文本插值 11-数据绑定之v-html指令 12-Vue.js中提供了完全的JavaScript表达式支持 13-数据绑定之实现双向数据绑定v-model指令(input应用) 14-数据绑定之v-model指令-textarea中应用 15-数据绑定之v-model指令-select下拉列表应用 16-数据绑定之v-model指令-checkbox单选应用 17-数据绑定之v-model指令-checkbox多选应用 18-数据绑定之v-model指令
  • vue中data定义数字类型_Vue中data数据的第2种定义方式
    从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。 学完本课程可以做一些基本的实战项目 学习Axios的使用 学习vue的基础语法 学习vue和后台数据库的交互 00-课程说明 【Vue起步】2 01-第一个Vue页面 02-VUE.JS框架的引入和安装 03-Vue.js起步-属性的定义和使用 04-Vue.js起步-函数的定义和使用 05-Vue中data数据的第2种定义方式 06-Vue中data数据的改变和设置方式1 07-Vue中data数据的改变和设置方式2 08-原生JS如何输出Vue中的data数据 09-Vue中的系统属性的使用 【Vue.js模板数据绑定和form元素】3 10-数据绑定-文本插值 11-数据绑定之v-html指令 12-Vue.js中提供了完全的JavaScript表达式支持 13-数据绑定之实现双向数据绑定v-model指令(input应用) 14-数据绑定之v-model指令-textarea中应用 15-数据绑定之v-model指令-select下拉列表应用 16-数据绑定之v-model指令-checkbox单选应用 17-数据绑定之v-model指令-checkbox多选应用 18-数据绑定之v-model指令
  • vue点击改变data_Vue中data数据的改变和设置方式1
    从vue.js的框架安装开始讲起,讲解vue中用到的常用的语法、数据绑定、指令、条件语句、循环语句、样式绑定、事件处理、监听、表单相关以及和后台数据库的交互。 学完本课程可以做一些基本的实战项目 学习Axios的使用 学习vue的基础语法 学习vue和后台数据库的交互 00-课程说明 【Vue起步】2 01-第一个Vue页面 02-VUE.JS框架的引入和安装 03-Vue.js起步-属性的定义和使用 04-Vue.js起步-函数的定义和使用 05-Vue中data数据的第2种定义方式 06-Vue中data数据的改变和设置方式1 07-Vue中data数据的改变和设置方式2 08-原生JS如何输出Vue中的data数据 09-Vue中的系统属性的使用 【Vue.js模板数据绑定和form元素】3 10-数据绑定-文本插值 11-数据绑定之v-html指令 12-Vue.js中提供了完全的JavaScript表达式支持 13-数据绑定之实现双向数据绑定v-model指令(input应用) 14-数据绑定之v-model指令-textarea中应用 15-数据绑定之v-model指令-select下拉列表应用 16-数据绑定之v-model指令-checkbox单选应用 17-数据绑定之v-model指令-checkbox多选应用 18-数据绑定之v-model指令
  • 前端面试题库总结
    全部面试题汇总写一个 mySetInterVal(fn, a, b),每次间隔 a,a b,a 2b 的时间,然后写一个 myClear,停止上面的 mySetInterVal合并二维有序数组成一维有序数组,归并排序的思路斐波那契数列字符串出现的不重复最长长度介绍chrome 浏览器的几个版本React 项目中有哪些细节可以优化?实际开发中都做过哪些性能优化react 最新版本解决了什么问题 加了哪些东西说一下 Http 缓存策略,有什么区别,分别解决了什么问题介绍防抖节流原理、区别以及应用,并用JavaScript进行实现前端安全、中间人***对闭包的看法,为什么要用闭包?说一下闭包原理以及应用场景css 伪类与伪元素区别有一堆整数,请把他们分成三份,确保每一份和尽量相等(11,42,23,4,5,6 4 5 6 11 23 42 56 78 90)实现 lodash 的_.get实现 add(1)(2)(3)实现链式调用React 事件绑定原理类数组和数组的区别,dom 的类数组如何转换成数组webpack 做过哪些优化,开发效率方面、打包策略方面等等说一下事件循环机制(node、浏览器)如何封装 node 中间件node 中间层怎样做的请求合并转发介绍下 promise 的特性、优缺点,内部是如何实现的,动手实现 Promise实现 Promise.allReact
  • Vue.js(基础使用方法详解)
    Vue Vue 基本配置项**Vue 扩展:** 模板引擎插值表达式指令v-for (遍历)v-text/v-htmlv-show/v-if (显示与隐藏)v-if/v-else-if/v-else (条件)v-bind (绑定属性)class 的绑定style 的绑定 v-on (事件)事件修饰符 v-model (绑定表单 value)v-model 修饰符 自定义指令局部指令全局指令 计算属性过滤器 (filter)过滤器的串联 侦听器 (ref & $refs)过渡 & 动画 官网: https://cn.vuejs.org 介绍: Vue 是渐进式 Javascript 框架 渐进式: 先使用Vue的核心库,再根据你的需要的功能再去逐渐增加相应的插件。 Vue最核心的功能就是数据渲染 Vue 基本配置项 const vm = new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }) el (element): 表示 vue 的接管范围(或者 vue 生效的范围) 推荐使用 id 选择器, id 具有唯一性不能使用 body 和 html, 否则会报错 data: 数据项, 是一个对象 网页中使用的数据需要预先在 data 中声明, 否则会报错data 选项中的数据是响应式的data 中的数据是直接挂在 vue 实例上的
  • web前端学习大纲
    一、HTML5 + CSS3 目标:能够独立把美工提供的PSD效果图还原成PC端静态代码页面 HTML5 浏览器与浏览器内核 语法及使用 常用标签 语义化 表单元素 HTML 新增标签 CSS3基础 CSS基本语法规范 常用的选择器用法与规范 复合选择器使用 数值与单位 文字文本样式 CSS3新增选择器 CSS3进阶 CSS盒子模型 CSS背影技巧 圆角/阴影/过渡 定位和浮动 伪类和伪元素 Chrome调试工具 CSS高级技巧(精灵图、CSS三角、图标字体等) CSS常见布局技巧大全 网页开发常见问题以及解决方案 CSS常见兼容性问题以及解决方案 CSS新增属性 Photoshop切图 cutterman插件一键切图 电商项目 代码组织原则 项目开发实战流程 电商类复杂页面布局规范 CSS初始化技术选择(normalize.css使用) CSS字体图标使用 CSS属性书写顺序规范 万恒的多页面开发 网页语义化设计 CSS页面模块化开发 favicon图标制作 复杂网页结构排版技巧 常见动画过渡特效 电商类常见布局问题解决方案 将电商项目部署到web服务器 二、移动WEB网页开发 目标:能够独立开发移动端页面,并适配不同的移动端终端 CSS3动画 CSS3的2D和3D变化 animation动画 炫酷页面开发(地图大数据热点图、大风车、旋转木马轮播图等) 移动端页面开发
  • 23 个 Vue.js 初级面试题,必收藏
    1. 为什么Vue被称为“渐进框架”?使用渐进式框架的代价很小,从而使现有项目(使用其他技术构建的项目)更容易采用并迁移到新框架。 Vue.js 是一个渐进式框架,因为你可以逐步将其引入现有应用,而不必从头开始重写整个程序。Vue 的最基本和核心的部分涉及“视图”层,因此可以通过逐步将 Vue 引入程序并替换“视图”实现来开始你的旅程。由于其不断发展的性质,Vue 与其他库配合使用非常好,并且非常容易上手。这与 Angular.js 之类的框架相反,后者要求将现有程序完全重构并在该框架中实现。2. Vue.js 中的声明式渲染是什么?Vue.js 使渲染数据变得容易,并隐藏了内部实现。例如下面的代码:HTML<div id=”app”></div>JavaScriptconst greeting = “Hello there!”; const appDiv = document.getElementById(“app”); appDiv.innerText = greeting;上面的代码段将在 ID 为 “app” 的 div 中显示短语 “Hello there!”。代码包含实现结果所需的所有步骤。首先选择 ID 为 “app” 的 DOM 元素,然后用 innerText 属性手动设置 div 的内容。现在,让我们看看在 Vue 中是怎么做的。Template<div id=
  • 如何管理 Webpack/Electron 应用程序的配置?(How to manage configuration for Webpack/Electron app?)
    问题 我正在使用 Webpack 2 和 Electron 在 Mac 上构建 nodejs 应用程序。 在我的项目根目录中,我有一个目录“data”,我将配置存储在 json 中,例如 data/configurations/files.json (实际上有不同的文件具有动态名称) 在fs.readdirSync(remote.app.getAppPath());之后,当我打电话时: fs.readdirSync(remote.app.getAppPath()); 要在根目录中获取文件,我只打包这些文件: [ "default_app.js", "icon.png", "index.html", "main.js", "package.json", "renderer.js" ] path.join(remote.app.getAppPath(), 'data/tests/groups.json'); 使用 FS ReadSync 调用会导致问题Error: ENOENT, data/tests/groups.json not found in /Users/myuser/myproject/node_modules/electron/dist/Electron.‌​app/Contents/Resourc‌​es/default_app.asar
  • v-text的用法
    v-text指令(相当于原生js中的innerText) 用于将数据填充到标签中,作用于插值表达式类似,但是没有闪动问题 (如果数据中有HTML标签会将html标签一并输出 ) 注意:此处为单向绑定,数据对象上的值改变,插值会发生变化;但是当插值发生变化并不会影响数据对象的值 <div id="app"> <!-- 注意:在指令中不要写插值语法 直接写对应的变量名称 在 v-text 中 赋值的时候不要在写 插值语法 一般属性中不加 {{}} 直接写 对应 的数据名 --> <p v-text="msg"></p> <p> <!-- Vue 中只有在标签的 内容中 才用插值语法 --> {{msg}} </p> </div> <script> new Vue({ el: '#app', data: { msg: 'Hello Vue.js' } }); </script> v-html指令(相当于原生js中的innerHTML) 用法和v-text 相似 但是它可以将HTML片段填充到标签中 可能有安全问题, 一般只在可信任内容上使用 v-html,永不用在用户提交的内容上 它与v-text区别在于v-text输出的是纯文本,浏览器不会对其再进行html解析,但v-html会将其当html标签解析后输出。 <div id="app">   <p v-html="html"></p>
  • 我从 Vuejs 中学到了什么
    框架设计远没有大家想的那么简单,并不是说只把功能开发完成,能用就算完事儿了,这里面还是有很多学问的。比如说,我们的框架应该给用户提供哪些构建产物?产物的模块格式如何?当用户没有以预期的方式使用框架时是否应该打印合适的警告信息从而提升更好的开发体验,让用户快速定位问题?开发版本的构建和生产版本的构建有何区别?热跟新(HMR:Hot Module Replacement)需要框架层面的支持才行,我们是否也应该考虑?再有就是当你的框架提供了多个功能,如果用户只需要其中几个功能,那么用户是否可以选择关闭其他功能从而减少资源的打包体积?所有以上这些问题我们都会在本节内容进行讨论。 本节内容需要大家对常用的模块打包工具有一定的使用经验,尤其是 rollup.js 以及 webpack。如果你只用过或了解过其中一个也没关系,因为它们很多概念其实是类似的。如果你没有使用任何模块打包工具那么需要你自行去了解一下,至少有了初步认识之后再来看本节内容会更好一些。 提升用户的开发体验 衡量一个框架是否足够优秀的指标之一就是看它的开发体验如何,我们拿 Vue3 举个例子 createApp(App).mount('#not-exist') 当我们创建一个 Vue 应用并试图将其挂载到一个不存在的 DOM 节点时就会得到一个警告信息: 从这条信息中我们得知挂载失败了,并说明了失败的原因:Vue
  • 超详细的Vue渲染原理讲解
    目录 一、Vue简介1. MVVM、MVP和MVC2. Vue的基本配置 二、Vue渲染原理1. HTML与模板2. Vue组件的完整渲染过程(1). Vue自身的初始化阶段(2). 组件实例的生命周期管理阶段a. 实例初始化阶段b. 组件挂载、更新和销毁阶段 总结 本文的主要内容是详细地介绍Vue的内部渲染原理,从而帮助大家深入掌握关于Vue Options、生命周期等概念。为了帮助Vue使用经验较少的同学快速理解Vue,我们先从Vue的简介开始,第二部分再详细介绍Vue渲染原理。 一、Vue简介 1. MVVM、MVP和MVC MVVM,即model、view、view-model,业务层、视图层以及两者的绑定层。Vue的设计参考了MVVM架构,但不完全是一个MVVM框架,因为它没有严格意义上的绑定层。 MVVM要求开发者将业务层和视图层分开:业务层负责管理数据;视图层负责页面渲染;绑定层负责双向绑定,即视图层操作通过绑定层影响业务数据,业务数据的变化通过绑定层影响视图渲染,这三层是完全解耦的: 举个例子,假如我们的页面有一个h1标题,它要渲染的是js中变量title的值: <h1>这是标题</h1> <script> let title = '这是标题'; </script> 这里h1的文本内容就是由view层管理的;而model层负责的是管理业务数据title
  • Web前端常见面试题(js原生,vue,es6,小程序)合集
    VUE 1.什么是 vue 生命周期 答: Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。 2.vue生命周期的作用是什么 答:它的生命周期中有多个事件钩子,让我们在控制整个Vue实例的过程时更容易形成好的逻辑。 3.第一次页面加载会触发哪几个钩子 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子 4.简述每个周期具体适合哪些场景 5.created和mounted的区别 6.vue获取数据在哪个周期函数 7.请详细说下你对vue生命周期的理解? vue路由面试题 mvvm 框架是什么? vue-router 是什么?它有哪些组件 active-class 是哪个组件的属性? 怎么定义 vue-router 的动态路由? 怎么获取传过来的值 vue-router 有哪几种导航钩子? 6.$route 和 $router 的区别 7.vue-router响应路由参数的变化 8.vue-router传参 9.vue-router的两种模式 10.vue-router实现路由懒加载( 动态加载路由 ) vue常见面试题 1.vue优点 2.vue父组件向子组件传递数据? 3.子组件像父组件传递事件
  • uni-app解析及配置(小程序对应的转换)
    变化 文件变化: 以前是.html文件,现在是.vue文件 网络模型变化: 以前网页大多是b/s,服务端代码混合在页面里; 现在是c/s,前后端分离,通过js api(类似ajax的uni.request)获取json数据,把数据绑定在界面上渲染。 文件内代码架构变化: 以前一个html大节点,里面有script和style节点; 现在template是一级节点,用于写tag组件,script和style是并列的一级节点,也就是有3个一级节点。vue单文件组件规范 <template> <view> 必须有一个view,且只能有一个根view。写所有内容。 </view> </template> <script> export default { data(){ } } </script> <style> </style> 外部文件引用方式变化: 以前通过script src、link href引入外部的js和css; 现是es6的写法,import引入外部的js模块(注意不是文件)或css js要require进来,变成了对象。 在hello uni-app的common目录有一个工具类util.js,可以在hello uni-app中搜索这个例子查看。 <script> var util = require('../../../common/util.js'); /
  • vue2.x和vue3.x中的双向数据绑定原理有什么不同
    简单探讨一下vue2.x和vue3.x中实现数据绑定的原理有什么不同,首先vue2.x使用的是Object.defineProperty方法,这个方法不兼容IE9以下的版本;而vue3.x使用的是Proxy方法,至于什么是Proxy,待会会简单介绍一下 一. vue2.x实现原理 vue2.x版本,主要还是通过Object.defineProperty实现双向数据绑定的,我们通过写一个非常非常简化版的vue框架和demo来实现这个双向数据绑定,来看下实现过程 1 我们创建一个html模板: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"></div> <script src="./vue.js"></script> <script> var vm = new Vue({ el: 'app' }); setTimeout(function() { vm
  • 15个 Vue.js 高级面试题,必收藏
    1. 渲染项目列表时,“key” 属性的作用和重要性是什么?渲染项目列表时,key 属性允许 Vue 跟踪每个 Vnode。key 值必须是唯一的。如果没有使用 key 属性,并且列表的内容发生了改变(例如对列表进行排序),则虚拟 DOM 宁愿使用更新的数据来修补节点,来反映更改,而不是上下移动元素。这是默认模式,非常有效。当提供唯一的键值 IS 时,将根据对键的更改对元素进行重新排序(并且不使用新数据对它们进行修补),如果删除了 key(例如,删除列表中的项目时),则对应的元素节点也被销毁或删除。请注意下图:这里有一个父组件渲染一个子组件列表。我们看到三个列表项被渲染为三个子组件节点。这些子组件都包含一个 span 标记和一个输入框,可能还包含一个本地状态对象(可选)。现在让我们检查两种情况:当不使用 key 属性时:例如如果列表已重新排序,则 Vue 会使用重新排序的数据简单地修补已经存在的三个节点,而不用移动这些节点。只要用户没有输入或更改这些子组件中一个或多个子组件的本地状态,此方法就可以正常工作。因此假设用户输入了组件编号为 3的输入框,重新排序列表后,组件编号为 3 的 span 标签内容将呗更改,但是输入框将与用户键入的内容击破状态数据一起保留在这里。这是因为 Vue 无法识别组件编号 3,它只是重新修补它所看到的更新数据,即 span 标签的内容。当在子组件上使用
  • 网上总结的字节跳动前端面试题
    1.jQuery与Vue的区别是什么? Vue:vue是一个兴起的前端js库,是一个精简的MVVM。从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。 区别:JQuery和Vue的主要区别是JQuery主要是通过选择器来选取DOM,对其进行赋值,取值,事件绑定等操作,数据和页面是混合在一起的,它和原生的HTML的区别只在于可以更方便的选取和操作DOM对象;Vue则是通过Vue对象将数据和视图完全分割开来,对数据进行操作,不再需要引用相应的DOM对象,实现了MVVM。(Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象,可以说数据和View是分离的,他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。) 代码示例链接:https://www.jianshu.com/p/729b9fc05edf MVVM的理解 javascript数据基本类型有哪些? Number、String、Boolean、Null、undefined、object、symbol、bigInt Object 中包含的类型:Data、function、Array JS数据类型:JS 中 typeof 输出分别是什么?
  • Vue.js -- 指令部分01
    Vue.js -- 指令 第一部分 Vue.js1. 指令2. 内容输出2.1 v-text2.2 v-cloak2.3 v-html2.4 v-once2.5 v-pre 3. 逻辑处理3.1 v-show3.2 v-if3.3 v-else / v-else-if 4. 循环与列表4.1 v-for4.2 :key 5. 属性绑定5.1 v-bind缩写 5.2 样式5.2.1 style5.2.2 class 6. 数据流6.1 单向数据流6.2 双向数据流 v-model Vue.js 1. 指令 表达式的值除了可以出现内容中,也可以使用在其它位置,比如:属性。但是不能使用 {{}} 语法,而是需要 指令 v-指令名称 = 表达式 (加“ ”,但不是普通字符串) v- 前缀代表vue ~ ~ ~ 在 vue 中,指令是一个带有 v- 前缀的属性,与普通属性不一样的地方在于,指令的值是引号括起来的 表达式,不同的指令有不同的作用,vue 内置了一些常用的指令,后期我们还可以自定义属于自己的指令 内容输出循环逻辑属性绑定事件其它 2. 内容输出 通过 {{}} 我们可以很方便的从模板中输出数据,但是这种方式会有一个问题,当页面加载渲染比较慢的时候,页面中会出现 {{}} ,vue 提供了几个指令来解决这个问题 指令中 的 表达式 不需要使用 {{}} 2.1 v-text v
  • web前端框架常见问题
    面向对象: 面向对象是一种程序开发的方法,它将对象作为程序的基本单元,将程序和数据封装其中,以提高软件的灵活性、重用性和扩展性。对象是把数据及对数据的操作方法放在一起,作为一个相互依存的整体。再说一下类与对象,类描述了一组有相同特性和相同行为的对象,具有相同属性和相同方法的对象的抽象就是类。即,对象的抽象是类,类的实例是对象。在面向对象的编程中,把用类创建对象的过程称为实例化。 面向过程与面向对象的区别 面向过程是一种直接的编程方法,它是按照编程语言的思路考虑问题。通过顺序执行一组语句来实现一个功能,这些语句的执行过程就是整个程序。 面向对象是一种抽象度更高的编程方法。它的目标是使模块的抽象度更高,目的是可复用。面向对象三大特性:封装,继承,多态。 面向过程可以说是从细节方面思考问题 面向对象可以说是从宏观方面思考问题 对象的创建方式有对象字面量,工厂方式,原型方式,构造函数,混合模式。 原型,原型链: 我们创建的每个函数都有一个prototype属性,这个属性是一个指针,指向一个对象,这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。那么,prototype就是通过调用构造函数而创建的那个对象实例的原型对象。 使用原型的好处是可以让对象实例共享它所包含的属性和方法。也就是说,不必在构造函数中添加定义对象信息,而是可以直接将这些信息添加到原型中
  • Vue指令(超详细)
    准备开始 本章要给大家带来的内容是相关Vue中的组件以及一系列常用属性。本章合适人群囊括了除已有开发经验人员以外的小白新手,从how、why、what三个角度来让大家理解并使用该技术… 历史介绍(数据源自2017年github) angular 09年,年份较早,一开始大家是拒绝 star:33.4kreact 2013年, 用户体验好,直接拉到一堆粉丝 star:89kvue 2014年, 用户体验好 star:84.6k 前端框架与库的区别? jquery 库 -> DOM(操作DOM) + 请求art-template 库 -> 模板引擎框架 = 全方位功能齐全 简易的DOM体验 + 发请求 + 模板引擎 + 路由功能 KFC的世界里,库就是一个小套餐, 框架就是全家桶代码上的不同 一般使用库的代码,是调用某个函数,我们自己把控库的代码一般使用框架,其框架在帮我们运行我们编写好的代码 框架: 初始化自身的一些行为 执行你所编写的代码施放一些资源 vue起步 1:引包 2:启动 new Vue({el:目的地,template:模板内容}); options 目的地 el内容 template数据 data vue的文件介绍 目录介绍 插值表达式 {{ 表达式 }} 对象 (不要连续3个{{ {name:‘jack’} }})字符串 {{ ‘xxx’ }}判断后的布尔值 {{
  • Electron9.x_Vue_调用DLL库
    本文主要介绍在 Electron9.x 中,使用ffi-napi,ref-array-napi,ref-napi 加载 Windows 动态链接库,并在Vue 渲染进程中使用。使用过程中会遇到一系列的坑,本文将会一一解决,并解释原因。如有同行兄弟遇到此问题可以借鉴。 这里列出所使用的环境: Visual Studio 2017NodeJS v12.17.0 (x64)node-gyp v7.0.0Python 2.7.15Electron :9.1.0@vue/cli 4.4.6vue-cli-plugin-electron-builder : 2.0.0-rc.4ffi-napi : 3.0.1ref-napi : 2.0.3ref-array-napi : 1.2.1ref-struct-napi : 1.1.1 1. 先自己开发一个DLL文件备用 非本文重点,熟悉的朋友可以略过。在这个DLL中,分别开发了三种情况的C函数: A. 参数为基本数据类型B. 参数为指针C. 参数为指向数组的指针 A比较简单,而B和C 涉及到 参数为指针的情况,函数内部可以修改指针指向的内存,函数运行完毕之后,外部内存中的值将会被修改。相当于输出参数,使用JS调用的时候涉及到内存共享问题。 使用 Visual Studio 2017 开发DLL步骤如下: 1.1 新建项目 配置编译为 64 位