导入js:
一、hello vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{
{ message }}</p>
</div>
<script>
new Vue({
el: '#app',
data:{
message:'Hello Vue.js!'
}
})
</script>
</body>
</html>
二、vue起步
1.每个 Vue 应用都需要通过实例化 Vue 来实现。
2.Vue构造器中有一个el参数来确定元素
用data定义属性，methods定义函数，{
{}}用于输出对象属性和函数返回值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
Vue构造器:
<div id="vue_det">
<h1>site:{
{ site }}</h1>
<h1>url:{
{ url }}</h1>
<h1>{
{ details() }}</h1>
<h1>answer:{
{ self() }}</h1>
</div>
Vue事例创建：
<div class="vue2">
<h1>site:{
{ site2 }}</h1>
<h1>url:{
{ url2 }}</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#vue_det',
data:{
site:"菜鸟教程",
url:"www.runoob.com",
ale:"10000"
},
methods:{
details:function(){
return this.site+"技术不是梦"
},
self:function(){
var x=1,y=2;
return x+y;
}
}
})
var data2 = {site2:"菜鸟教程2",url2:"www2"}
var vm2 = new Vue({
el:'.vue2',
data : data2
})
console.log(vm2.site2===data2.site2);
vm2.site2="xxxx";
</script>
</body>
</html>
3.当一个Vue实例被创建时，他向Vue的响应式系统中加入了其data对象中能找到的所有属性。当这些属性的值发生变化时，html视图将也会产生相应的变化。
4.除了数据属性，Vue实例还提供了一些有用的实例属性和方法。他们的前缀都是$，以便于用户定义的属性分开来。
三、Vue模板语法
1.插值：{
{}}
使用v-html来输出html代码
属性：HTML 属性中的值应使用 v-bind 指令。
以下实例判断 class1 的值，如果为 true 使用 class1 类的样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<style type="text/css">
.class1{
background: #444;
color: #eee;
}
.class2{
background:red;
color: #000;
}
</style>
<body>
<div id="app">
<label>修改颜色</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1':use}">
<div v-bind:class="{'class2':!use}">
v-bind:class指令
</div>
</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
use:false
}
})
</script>
</body>
</html>
表达式：Vue.js 都提供了完全的 JavaScript 表达式支持。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<style type="text/css">
#list-1{
background: red;
}
</style>
<div id="app">
{
{5+5}}<br>
{
{ok ? 'YES':'NO'}}<br>
{
{message.split('').reverse().join('')}}
<div v-bind:id="'list-'+id">{
{message}}</div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
ok:true,
message:'RUNOOB',
id:1
}
})
</script>
</body>
</html>
2.指令
指令是带有v-前缀的特殊属性。
指令用于在表达式的值改变时，将默写行为应用到DOM上。如下例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<p v-if="seen">现在你看到我了</p>
<p v-if='!seen'>xxxxxxxx</p>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
seen:true
}
})
</script>
</html>
这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
2.参数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<body>
<div id="app">
<pre><a v-bind:href="url">菜鸟教程</a></pre>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
url:'http://www.runoob.com'
}
})
</script>
</body>
</html>
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性。
另一个例子是 v-on 指令，它用于监听 DOM 事件：
在这里参数是监听的事件名。
3.修饰符
修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
文章浏览阅读435次。2005年，全国计算机等级考试一级增加一级WPSOffice，二级取消三个科目，新增加三个科目，二级上机考试中取消对DOS部分的考核，新增科目将于2005年上半年在全国正式推广。记者昨天从教育部考试中心获悉，全国计算机等级考试今年开始进行重大调整，考试内容和考试方式上均有较大的变化。一级考试开考科目名称调整为：一级MSOffice(原称一级)、一级B，新增加一级WPSOffice。取消一级科目的纸..._为什么现在计算机c语言程序设计二级不分等级了吗?
文章浏览阅读2k次。作者：人宅目录简介目前支持的功能1.界面认识1.1 加载SimpleHotUpdate插件1.2 OSS服务器配置1.3 热更新的服务器文件路径1.4 客户端热更后的安装补丁设置1.5 主版本和额外版本1.6 版本号1,7 关于打包的设置描述1.8 RSA加密1-9 菜单配置表按钮介绍1-10 HTTP服务器界面认识1-11 配置HTTP服务器的服务器1-12 HTTP服务器脚本2 上传补丁和加载补丁方法。2.1 补丁上传2.2 客户端安装策略2.3 生..._ue5 打补丁
文章浏览阅读1w次，点赞10次，收藏21次。带参数跳转页面目的：实现页面A带参跳转页面B，并在页面B中获取到相应的参数A页面--------获取id、name值并跳转页面// demo.jsgotoB() { let project_id = e.target.dataset.id; let project_name = this.data.userName; wx.navigateTo({ url: './add/add?id=' + project_id + '&name=' + project__小程序页面传参案例,小松菜
文章浏览阅读496次。GEE生成研究区域一年内平均温度变化图_gee中进行温度的趋势分析
文章浏览阅读1k次。jenkins可以设置定时任务打包，也已手动点按钮打包，还可以通过执行http请求打包，今天我们就通过shell脚本，通过curl命令进行jenkins打包。_jenkins 自动打包 脚本在package中咋写
文章浏览阅读1.6k次，点赞3次，收藏3次。张亮京东数科数据研发负责人Apache孵化项目ShardingSphere负责人是写第一行代码的人，可以说是创始人京东数科分布式事务中间件JDTX负责人技术书籍 《未来架构——从服务化到云原生》作者在2019年用闲暇时间写的目录简介分布式数据库核心功能做shardingshpere的指导思想ShardingSphere的实现与规划目前ShardingShpere的状..._shardingshere centos搭建
文章浏览阅读63次。ListView控件比前面几种控件要复杂一些，通过此控件，可将项目组成带有或不带有列标头的列，并显示伴随的图标和文本。ListView控件是由ColumnHeader和ListItem对象所组成的，其中ColumnHeader对象的个数决定了控件的列数，而ListItem对象的个数则决定了控件的行数。(图7) ColumnHeader对象是ListView控件中包含标头文字的项目。利用Colum..._tooltip1和listview中columnheader使用
文章浏览阅读3.3k次。问题：远程管理服务器的时候反应特别慢，在命令行敲命令的时候很长时间才在终端显示出来怀疑原因：1、查看远程服务器CPU负载情况、内存使用情况、磁盘IO等系统资源使用情况，可以使用sar、uptime、top、iostat、vmstat等2、查看网络是否稳定，使用 ping 查看是否丢包严重..._远程资源管理器速度慢
文章浏览阅读2k次，点赞2次，收藏13次。#include <stdio.h># define MAX_N 20 // 定义(x_i,y_i)的最大的维数 typedef struct tagPOINT // 点的结构 { double x; double y;} POINT; int main ( ) { int n; int i, k; POINT points[MAX_N + 1]; double h[MAX_N + 1], b[MAX_N + 1], c[_typedef struct tagpoint // 插值点的结构体成员有x, y { double x; double y; }
文章浏览阅读1.4k次。文章目录算数操作符算数操作符Python的算数操作符大部分和我们理解的一样，但尤其要注意一些特别的操作符。一般常用的操作符有：+−∗/%∗∗// +\quad -\quad *\quad /\quad \%\quad **\quad //\quad+−∗/%∗∗//前四个不用过多介绍了，加减乘除。此外，Python和其他大多数编程语言一样，可以简化写法。例如：a = a+1 可以写成 a += 1 等。..._≥是操作符吗
文章浏览阅读1.8k次。DataFrameDataFrame介绍DataFrame表示的是矩阵的数据表,它包含已排序的列集合，每一列可以是不同的值类型(数值,字符串,布尔值)。在DataFrame中，数据被存储为一个以上的二维块。DataFrame创建pd.DataFrame(data=None,index=None,columns=None,dtype=None,copy=False)• data：创建数组的数据，可为ndarray, dict• index：指定索引• dtype：数组数据类型• copy：是_数据处理和分析删除dataframe中重复的数据记录。重置索引,使索引重新按顺序依次编
文章浏览阅读125次。1.跨域1.1 跨域测试1.1.1 JT-MANAGE后端测试1.页面结构<!DOCTYPE html><html><head><meta charset="UTF-8"><title>测试JSON跨域问题</title><script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js">