vue简单介绍及使用,模板语法,指令,style和class

本文介绍了前端开发中流行的Vue.js框架,详细讲解了Vue的模板语法,包括v-html、v-text、v-show、v-if等指令的使用,以及事件处理和属性绑定。同时,文章还探讨了如何操作元素的style和class。
摘要由CSDN通过智能技术生成

一.前端目前形势

1 html5,css3,js(es5,es6):写入一个一个的页面--->给后端(php,python,go,java)--->后端嵌入模板语法--->后端渲染完--->返回给前端--->在浏览器中看
2 ajax出现--->后台发异步请求,render+ajax混合(bbs项目)
3 单用ajax(加载数据,dom渲染页面):前后端分离的雏形
4 agular:js框架,前端工程化,前端也是一个工程,一个项目
5 react,Vue:当下最火的两个前端框架(vue国人,react外国)
6 移动开发(安卓,ios)+web(web,微信小程序,支付宝小程序)+桌面开发(Windows桌面):前端--->大前端
7 一套代码在各个平台运行(前端):谷歌flutter(Dart:跟Java很像):iOS,安卓,桌面
8 在Vue框架的基础上 nui-app:https://uniapp.dcloud.io/ 一套代码编到10个平台,这不是梦想
9 在不久的将来,前端的框架可能会一统天下

二.Vue介绍和使用

1 渐进式JavaScript:JavaScript的框架(jq),写简单的可以使用vue,写复杂的项目也可以使用
2 MVVM:Model-View-ViewModel
	-model:数据(后端给的,js接收到)
	-ViewModel:中转(双向数据绑定:js中变量变了,html中数据也跟着变)
	-view:视图(html+css)
3 组件化开发,单页面开发
4 版本: 1.x 2.x (用的最多) 3.x(beta版本)
5 下载:(可以使用cdn)
	-开发版本:vue.js :https://vuejs.org/js/vue.js
	-生产版本:vue.min.js :https://vuejs.org/js/vue.min.js
6 前端开发:webstorm,sublinetext,vscode(python,java,go,前端,免费),pycharm
7 快速使用
8 补充:解释型语言,需要解释器,js解释器集成到浏览器中了,console就等同于你在cmd中敲python3进的交互式命令行是一样的
9 nodejs:把Chrome的v8引擎(解释器),安装到操作系统之上

三.模板语法

1 插值语法  {
   {
    js变量或js语法 }}
2 代码演示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./js/vue.js"></script>
    <title>Title</title>
</head>
<body>

<div id="box">
    <p>{
  {name}}</p>
    <p>{
  {age}}</p>
    <p>{
  {ll}}</p>
    <p>{
  {obj}}</p>
    {
  {10+20+90}}
    {
  {10<20?'是':'否'}}

</div>

</body>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值