初识vue
时间:2021-07-12
本文章向大家介绍初识vue,主要包括初识vue使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
vue
1 渐进式框架
2 vue 版本:最新3.x,主流用2.x
3 第三方:vue-cookie,vue-router,vuex:状态管理器
4 M-V-VM思想:数据的双向绑定(*****)
Model :vue对象的data属性里面的数据,这里的数据要显示到页面中
View :vue中数据要显示的HTML页面,在vue中,也称之为“视图模板” (HTML+CSS)
ViewModel:vue中编写代码时的vm对象,它是vue.js的核心,负责连接 View 和 Model数据的中转,保证视图和数据的一致性,所以前面代码中,data里面的数据被显示中p标签中就是vm对象自动完成的(双向数据绑定:JS中变量变了,HTML中数据也跟着改变)
5 组件化开发、单页面开发
-vue-cli:vue的脚手架---》创建出Vue工程
6 版本使用的是2
7 解释型的语言是需要解释器的
js就是一门解释型语言,只不过js解释器被集成到了浏览器中
所以,在浏览器的Console中输入命令,就和在cmd中输入python后,进入交互式环境一样
nodejs:一门后端语言
把chrome的v8引擎(解释器),安装到操作系统之上
开发常见编辑器
1 ide:
python--->pycharm,vscode(免费),juptyer (anaconda)
go------->goland,vscode(免费)
java----->IDEA , myeclipse,eclipse
前端----->webstorm,sublinetext,Hbuilder(nui-app),vscode,pycharm:vue插件
php------>phpstrom
c/c++---->clion
安卓开发---->androidstadio---->谷歌公司买了授权+adt
2 捷克的jetbrains公司出的,后期不管做什么语言,简易都用他家的
下载
下载对应vue的js文件
1.导入js 配置
<script src="./js/vue.js"></script>
2.新建html项目
实例化得到对象,传入一些参数
<script>
let xxx = new Vue({
el: '#ID', // el这个参数名称固定
data: {
name: 'xxx',
},methods:{ } //事件
})
</script>
模板语法
<div id="app">
<p>
名字:{{name}}
</p>
<p>
数组:{{t}}
</p>
<p>
数组的第一个值:{{t[1]}}
</p>
<p>
对象:{{obj}}
</p>
<p>
对象取值:{{obj.name}}
</p>
<p>
s字符串:{{s}}
</p>
条件?值:值
<p>三目运算符: {{100>20?'是':'否'}}</p>
</div>
指令之文本指令
v-html 让HTML字符串渲染成标题
v-text 标签内容显示js变量对应的值
v-show 放1个布尔值:为真 标签就显示;为假 标签就不显示
v-if 放1个布尔值:为真 标签就显示;为假 标签就不显示
指令之事件指令
v-on:事件 触发事件(不推荐)
@事件 触发事件(推荐)
@[event] 触发event事件(可以是其他任意事件)
eg:
事件 函数名
<input type="text" @input="handlerInput" v-model="xxx">
<botton v-on:click='函数名'>点击</botton>
原文地址:https://www.cnblogs.com/oldboyqixu/p/15003430.html
- 飞机大战
- 译《ES6的6个小特性》
- 微信小程序从使用到分析快速解析
- andriod游戏音效
- JavaScript模块探索
- 数据层扩展包EFCachingProvider 总结
- Mac配置Maven
- FileSystemWatcher 导致Mono ASP.NET应用程序CPU使用率比较高
- 网卡收包流程
- Android 异步加载图片,使用LruCache和SD卡或手机缓存,效果非常的流畅
- Terminal &zsh &oh-my-zsh配置
- 【Python量化投资】基于网格优化、遗传算法对CTA策略进行参数优化
- 将我的 Windows Phone 应用程序更新到 Windows Phone 8
- 绑定子类的泛型基类,反模式?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- python第三十一课--递归(2.遍历某个路径下面的所有内容)
- python第三十一课--递归(3.递归的弊端)
- python第三十二课——栈
- linux系统运维企业常见面试题集合(三)
- python第三十二课——队列
- python第三十四课——1.匿名函数的定义和使用
- python第三十四课——2.匿名函数配合容器函数的使用
- 专家专栏|使用agent2自定义插件采集通过MQTT协议发送的数据
- Linux系统双网卡绑定配置教程
- python第三十五课——生成器
- python第三十六课——1.可迭代对象
- Linux系统Shell编程——脚本编写思路与过程
- python第三十六课——2.迭代器对象
- python第三十七课——模块
- Linux系统MySQL数据库主从同步实战过程