放在
<style type="text/javascript"></style>
形式:
[v-text]{
display: none;
} //相当于自定义属性
MVVM设计思想:
M(model) V(view) VM(View-Model) 分而治之,把不同的功能放到不同的模块
指令:
(1)什么是自定义属性
(2)指令的本质就是自定义属性
(3)指令的格式是以v-开始(比如v-on)
1.v-text 填充纯文本 2.v-html 填充HTML片段 (1)存在安全问题,容易导致xss攻击 (2)本网站内部数据可以使用,来自第三方的数据不可以用
3.v-pre 填充原始消息 (1)显示原始信息,跳过编译过程
4.v-once
(1)数据只更新一次.不会被更改
5.v-model ********
(1)放在input里面.数据改变那么内容就会改变(双向数据绑定)
6.v-bind 动态的处理属性
(1)例如 v-bind:href="url" 可以动态的改变属性
(2)可以简写为 <a :href="url"> 省略为 :属性名="属性值"
自定义指令:
注:钩子函数: inserted,blind等
(1)全局自定义指令
<div id="app">
<input type="text" value="是是是" v-aaa v-qqq="{color:'pink'}">
<div v-qqq></div>
<!-- v-aaa就是自定义属性 功能是页面刷新input元素自动获取焦点 -->
</div>
<script type="text/javascript" src="../第一天/node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
//自定义指令
Vue.directive("aaa",{
inserted:function(el){ //el表示指令绑定的元素
el.focus();
}
})
Vue.directive("qqq",{
inserted:function(el,binding){
console.log(binding.value.color)
//binding 是自定义指令的参数 binding.value是属性
el.style.backgroundColor = binding.value.color;
}
})
var vm = new Vue({
el:"#app",
data:{
},
methods:{
},
})
</script>
(2)局部自定义指令
// 局部指令需要定义在 directives 的选项
directives: {
color: {
bind: function (el, binding) {
el.style.backgroundColor = binding.value.color
}
},
focus: {
inserted: function (el) {
el.focus()
}
}
}
})