一般情况下我们通过设置类名就可以改变元素的样式，但涉及到动画部分，就一定需要设置内联样式了，因此有了ms-css。*ms-css*的用法为ms-css-样式名="样式值"， 如ms-css-width="prop"(会自动补px)，ms-css-height="{{prop}}%", ms-css-color="prop", ms-css-background-color="prop", ms-css-font-size="{{prop}}px"。细细联想，ms-css与ms-class的旧风格、ms-data、ms-attr的用法相仿，属性名接第三个参数作为name，属性值作为value。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script src="avalon.js"></script>
<script>
var model = avalon.define({
$id: "test",
background: "red"
})
model.$watch("background", function(v) {
model.background = v
})
</script>
</head>
<body>
<div ms-controller="test">
<div style="width:200px; height:50px" ms-css-background="background">
</div>
<select ms-duplex="background">
<option value="red">红</option>
<option value="yellow">黄</option>
<option value="green">绿</option>
</select>
</div>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="avalon.js" ></script>
<script>
var model = avalon.define({
$id: "test",
percent: 0
})
var a = true
var id = setInterval(function() {
if (a) {
if (model.percent < 100) {
model.percent++
} else {
a = false
}
} else {
if (model.percent > 0) {
model.percent--
} else {
a = true
}
}
}, 100)
</script>
<style>
.handerx{
width:20px;
height:20px;
position: absolute;
color:#fff;
background: #000;
}
.sliderx{
width:100%;
height:20px;
position: relative;
}
.body{
padding:40px;
}
</style>
</head>
<body ms-controller="test" class="body">
<div class="slider" style="background:red;">
<div class="handerx" ms-css-left="{{percent}}%" >{{percent}}</div>
<div style="background: greenyellow;height:20px" ms-css-width="{{percent}}%"></div>
</div>
<div class="sliderx" style="background:#d2d2d2;">
<div style="background: #2FECDC;height:20px" ms-css-width="{{100-percent}}%"></div>
</div>
</body>
</html>
<html>
<head>
<title>ms-css</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script src="../avalon.js" ></script>
<script>
var vm = avalon.define({
$id: "test",
w: 100,
h: 100,
click: function() {
vm.w = parseFloat(vm.w) + 10;
vm.h = parseFloat(vm.h) + 10;
}
})
</script>
</head>
<body>
<div ms-controller="test">
<div style=" background: #a9ea00;" ms-css-width="w" ms-css-height="h" ms-click="click"></div>
<p>{{ w }} x {{ h }}</p>
<p>W: <input type="text" ms-duplex="w" data-duplex-event="change"/></p>
<p>H: <input type="text" ms-duplex="h" /></p>
</div>
</body>
</html>
ms-css已经在内部帮你处理好兼容问题，如opacity在旧式IE下用滤镜替换， tranform的私有前缀添加什么的。最后要注意一点，属性值不能加入CSS hack与important!
本文链接：迷你MVVM框架 avalonjs 学习教程10、样式操作，转载请注明。
1. 创建 SSH KEY
使用 ssh-keygen 生成一个密钥对，并且将公钥注册到服务器的 $HOME/.ssh/authorized_keys 文件。
2. 确保启用 SSH 公钥认证功能
查看 /etc/ssh/sshd_config 文件，确保以下两条为 yes：
PubkeyAuthentication yes
一般它们默认都是 yes，如果不是，请修改为 yes，保存并且重启 SSH 服务：
3. 禁止密码安全验证
编辑 /etc/ssh/sshd_config 文件，确保以下内容出现在文件中：
PasswordAuthentication no
UsePAM no
保存并重启 SSH 服务：
如果你当前处于 SSH 连接登录状态，可能重启服务会失败，可以尝试重启系统。
4. 禁止特定条件使用密码登录
有时我们并不想禁止所有用户的口令登录，可以通过配置 sshd_config 文件来实现对特定对象的登录设置。
使用 $ man sshd_config 查看帮助信息。sshd_config 支持在文件中增加 Match 区块，如果 Match 关键字所在行的条件匹配成功，则 Match 后所有的关键字将被逐个加载，直到遇见另一个 Match 关键字或者文件结尾。所以一般 Match 区块添加在 sshd_config 文件末尾。
Match 关键字支持的条件包括 User, Group, Host 和 Address，条件样式是单个字符串，多个样式使用逗号分隔，也可以使用通配符（*）和求反符号（!）。
Address 条件样式可以是 CIDR（地址/掩码）格式，例如：192.0.2.0/24 或 3ffe:ffff::/32。
例如禁止用户 foo，用户组 bar 使用口令登录，在 /etc/ssh/sshd_config 文件末尾添加以下内容：
PasswordAuthentication no
禁止除用户 foo 以外其他用户使用口令登录：
PasswordAuthentication no
Match 区块支持的关键字包括：
本文链接：[Linux] 如何禁止使用口令只允许使用密钥建立 SSH 连接，转载请注明。
没有评论:
发表评论