Vue基础学习一

Vue基础一



1.0 前端开发规范

? 前端开发规范

1.1 vue版本更迭

vue版本
???-?vue?1.0???2014年
???-?vue?2.0???2016年
???-?vue?3.0【?试用版?】?2019年国庆

1.2匿名函数

javascript
(function?(形参1,形参2)?{
/?你的代码?/
?})(实参1,实参2)

???-?好处
?????-?1.?防止全局作用域
?????-?2.?防止命名冲突
?????-?3.?防止一些脚本的攻击
?????-?4.?封装js库基本上都是用它来完成

1.3 数据驱动视图
??? -?意义:?当数据发生改变时,视图也会随之改变
??? -?我们从现在开始,不在关注v的变化了,我们关注data?

??1.4双向绑定


<div?id="app">
????????<input?type="text"?v-model?=?"msg">
????????<p>?{{?msg?}}?</p>
??????</div>
????</body>
????<script?src="vue.js"></script>
????<script>
??????new?Vue({
????????el:?'#app',
????????data:?{
??????????msg:?'Hello?Vue'
????????}
??????})
????</script>`

1.5一个迷你Vue

(function(global,?factory)?{
????global.MinVue?=?factory()
})(this,?function()?{
????'use?strict';
????function?MinVue(options)?{
????????if?(!(this?instanceof?MinVue))?{
????????????warn('MiniVue?is?a?constructor?and?should?be?called?with?the?`new`?keyword');
????????}
????????this._init(options);
????}
????MinVue.prototype._init?=?function(options)?{
????????console.log(options);
????????document.querySelector(options.el).innerHTML?=?options.data.msg;
????}
????return?MinVue;
})

1.6 new Vue()的结果

以标签化呈现,?,称之为:<font?style?=?"color:?red;">??根实例组件?

### 学习vue遇见的问题
1.怎么在服务器上运行html?
- open with live server 右键选择
2.怎么改变运行的默认浏览器?
-文件->首选项->设置 输入open-in

原文地址:https://www.cnblogs.com/hff-syt/p/11695128.html

时间: 2024-10-12 07:18:23

Vue基础学习一的相关文章

vue基础学习(一)

01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= function(){ var c = new Vue({ el:"#box",//选择器 data:{ 'msg':'welcome vue' } }); } </script> 01-02 v-model一般用于表单元素数据双向绑定 <div id="box&quo

Vue基础学习之DOM操作

demo说明: 1.{{message}}                          --声明式渲染 2.v-bind:属性名                        --绑定元素属性 3.v-if="change=='a'"              --判断change=='a',等于则显示该DOM节点 4.v-else-if="change=='b'"      --结合[v-if]使用,判断change=='b',等于则显示该DOM节点 5.v

vue基础学习(三)

03-01  vue的生存周期-钩子函数 <style> [v-cloak]{display:none;} </style> <div id="box" v-cloak> {{msg}} <p v-text="msg"></p> </div> <script> //解决模板{{XX}}闪烁问题: // css: [v-cloak]{display:none;} 在模板中加v-cloa

Vue基础学习 --- 遍历数组

<body> <div id="app"> <ul> <!-- 遍历数组 --> <li v-for="user in users"> {{user.name}}:{{user.age}} </li> <!-- index索引,从0开始. --> <li v-for="(item, index) in users" :key="index"

Electron+Vue – 基础学习(2): 项目打包成exe桌面应用

项目创建完成,启动正常,接下来就是项目打包了.将测试Demo打包成exe桌面应用,点击exe文件,运行项目. 书接上文,创建项目有三种方式 Git拷贝.直接创建:通过electron社群提供的命令行工具(CLI)  electron-forge 创建项目,看起来对应的项目打包方式也应该有三种才对,但其实细看第一种方式和第三种项目创建方式是一样的,所以它们的项目打包方式也是一样的. 打包 electron 项目webpack工具有 electron-packager 和 electron-buil

Vue.js 基础学习 v-on 指令

在前面的基础学习中已经写了v-for和v-bind两个指令 今天学习v-on指令 v-on指令:用来绑定事件的body中 <div id="app"> </div> script中 var app = new Vue({ el : '#app', methods : { } }) 在div app中加入一个button并绑定一个点击事件 <button v-on:click="onClick">点我</button>

从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:给博客首页加花样(二)

回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码的学习,简单的通过一些假的数据来展示了下个人博客的首页列表,不知道大家是否还记得昨天讲的什么,如果不太清楚呢,可以再回顾下<从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础:使用Vue.js 来画博客首页(一)>,我们主要说到了,Vue的核心语法是什么,MVVM

salesforce零基础学习(八十九)使用 input type=file 以及RemoteAction方式上传附件

在classic环境中,salesforce提供了<apex:inputFile>标签用来实现附件的上传以及内容获取.salesforce 零基础学习(二十四)解析csv格式内容中有类似的使用此标签进行解析附件内容,后台只要声明String类型变量用来存储附件名称,Blob类型变量用来存储附件的内容即可. 但是当我们的项目整体使用第三方的前端框架,例如VUE或者angular等前端框架时,有时使用apex:inputFile反而不是很方便,需要用到html的原生的附件上传的标签<inpu

零基础学习web前端,大神给你们指路

随着web前端的飞速发展,学习web前端的人员也是越来越多,在移动 互联网 时代,相信我们每个人的手机上都装有数十个APP,这些APP的开发其实也和当下热门的 Web 前端开发息息相关. 事实上,如今一半以上的APP都是采用Hybrid混合模式开发,即结合安卓和Web端技术开发.而纯 Web开发 的APP也不在少数,比如我们众所周知的 QQ 空间就是使用 Web前端 的React Native技术开发.除了APP,我们在手机端常看到的H5页面,也是主要运用了Web端的 HTML5 技术开发. 当