(尚002)Vue的基本使用
输入端在上面变化的同时,下面的内容也在变
View-->DOM监听-->指令;大括号数据
{{username}}
Model-->模型(简单来说就是data,数据供view自动去读,自动读的背后需要有ViewModel的支撑)
data:{//数据(model)
username:'赵云'
}
ViewModel-->实例vm
vm=new Vue({//配置对象 option
el:'#app',//element:选择器
data:{//数据(model)
username:'赵云'
}
})
DataBinding 实现数据从内层model读数据到外层view
DOM Listener:数据输入框发生改变,需要Dom监听
其实是声明式开发:
不需要处理整个流程,只需要写特定语法的代码就可以如{{name}},说明我需要data里面的name
背后的一切不需要你来做,只需要按照别人的语法声明v-model就可以.
命令式开发:
说白了就是Jquery的写法,我们要去监听输入的值,读完之后需要把值设置到<p>标签中去. =====================================================================================================================================================
1.test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_HelloWorld</title>
</head>
<body>
<!--
1.引入vue.js
2.创建Vue对象
el:指定根element(选择器)
data:初始化数据(页面可以访问)
3.双向数据绑定: v-model
4.显示数据:{{}}
5.理解vue的mvvm实现
-->
<div id="app"> <!--view-->
<input type="text" v-model="username">
<p>Hello {{username}}</p>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
//创建Vue实例
const vm=new Vue({//配置对象 option
el:'#app',//element:选择器
data:{//数据(model)
username:'赵云'
}
})
</script>
</body>
</html>
2.页面展示
厉害了!!!
(尚002)Vue的基本使用的更多相关文章
- 002——vue小结
1.new 一个vue对象的时候你可以设置他的属性,其中最重要的包括三个,分别是:data,methods,watch. 2.其中data代表vue对象的数据,methods代表vue对象的方法,wa ...
- (尚022)Vue案例_初始化显示(十分详细!!!)
项目结构目录 所需资料: comment_page文件夹: ====================================================================== ...
- (尚020)Vue打包发布项目
1.项目的打包与发布 1.1打包: npm run build 报错: 原因:原来eslint是一个语法检查工具,但是限制很严格,在我的vue文件里面很多空格都会导致红线(红线可以关闭提示),虽然可以 ...
- (尚019)Vue基于脚手架编写项目
vue_demo目录结构截图: (1)图一 (2).图二 (3).图三 (四).图四 (5).图五 (6).图六 (7).图七 不能随便改入口文件的名字,因为已经配置好了 (8).图八 (9).图九 ...
- (尚017)Vue插件
1.如何开发插件? 2.编写自己的vue-myPlugin.js插件库,代码如下: /** * vue的插件库 * 最好使用匿名函数包裹起来,这样代码会更加规范 * 里面的实现被隐藏了 */(func ...
- (尚016)Vue指令(11个自带指令+自定义指令)
1.Vue常用指令 1)v:text:更新元素的 textContent 2)v-html:更新元素的 innerHTML 3)v-if:如果为true,当前标签才会输出到页面 4)v-else:如果 ...
- (尚015)Vue过滤器(对显示的数据进行格式化)
现在日期为:当前时间-1970年1月1日0时0分0秒的时间差 日期格式化:百度搜索moment 1.test015.html <!DOCTYPE html><html lang=&q ...
- (尚014)Vue过渡与动画
操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果) 过渡:trasition 动画:animation 1.vue动画的理解 1)操作css的trasition或animation(它 ...
- (尚013)Vue的生命周期
三个阶段: 一.初始化显示; 二:更新显示 三.死亡 每一个阶段都对应生命周期的回调函数(也叫勾子函数) 生命周期图示: 1. 2.test013.html <!DOCTYPE html> ...
随机推荐
- Python中的条件判断、循环以及循环的终止
条件判断 条件语句是用来判断给定条件是否满足,并根据判断所得结果从而决定所要执行的操作,通常的逻辑思路如下图: 单次判断 形式 if <判断条件>: <执行> else: &l ...
- golang程序因未知错误崩溃时如何记录异常
开发服务器程序时如果未经过充分测试, 服务稳定运行一段时间后会突然崩溃退出.一般是因为程序中出现了某个未捕获的异常. 这类问题属于偶现的,且需要服务器运行一段时间之后才会出现,难以定位有问题的代码段. ...
- 【转】用chrome滚动截屏
用开发者常用的网站chrome,打开需要截屏的网页 使用快捷键组合:Alt + Command + I (Mac) || Ctrl + Shift + I (Windows) 使用快捷键组合来打开命令 ...
- [高清] 深入浅出Spring Boot 2.x.pdf + 代码
------ 郑重声明 --------- 资源来自网络,纯粹共享交流, 如果喜欢,请您务必支持正版!! --------------------------------------------- 下 ...
- 关于梯度下降之前需要进行feature scale的记录
先上吴恩达老师的课件图 1.对于梯度下降而言,学习率很大程度上影响了模型收敛的速度.对于不同规模的特征,如果采用相同的学习率,那么如果学习率适应于scale大的数据,scale较小的数据由于学习率过大 ...
- Python之TensorFlow的数据的读取与存储-2
一.我们都知道Python由于GIL的原因导致多线程并不是真正意义上的多线程.但是TensorFlow在做多线程使用的时候是吧GIL锁放开了的.所以TensorFlow是真正意义上的多线程.这里我们主 ...
- PHP敏感信息脱敏函数
测试 $name = '王刚'; $mobile = '13817558198'; $name = desensitize($name,1,1); $mobile = desensitize($mob ...
- oracle in和exists区别
in和exists http://oraclemine.com/sql-exists-vs-in/ https://www.techonthenet.com/oracle/exists.php htt ...
- Springboot默认定时任务——Scheduled注解
1.pom配置 <dependencies> <dependency> <groupId>org.springframework.boot</groupId& ...
- Linux下环境变量设置 (转)
Linux下环境变量设置 1.在Windows 系统下,很多软件安装都需要配置环境变量,比如 安装 jdk ,如果不配置环境变量,在非软件安装的目录下运行javac 命令,将会报告找不到文件,类似的错 ...