Vue-基本使⽤、模板语法（插值表达式、指令、事件绑定、属性绑定、样式绑
定、分⽀循环结构）
Vue
Vue14年发布、16年2.0版本、
特点()：易⽤、灵活、⾼效
是⼀套⽤于构建⽤户界⾯的渐进式框架
vue使⽤基本步骤
<title>你好世界</title>
</head>
<body>
<div id="app">
<div>{{msg}}</div>
<div>{{1+2}}</div>
<div>{{msg+'-----'+1+2}}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
/*vue基本步骤
1、提供标签⽤于填充数据
2、引⼊库⽂件
3、使⽤vue语法做功能
4、把vue提供的库⽂件填充到标签中
*/
var vm=new Vue({
//el 元素挂载位置
//data数据模型(值是⼀个对象)
//{{}}叫插值表达式、填充数据、⽀持简单计算
el:'#app',
data:{
msg:'hello Vue'
}
})
</script>
指令
本质就是⾃定义属性
Vue中指令都是以 v- 开头
v-cloak
作⽤：防⽌页⾯加载时出现闪烁问题
闪烁问题原因:vue语法编译前、有短暂显⽰原始插值表达式
原理：先隐藏替换好值后在显⽰最终的值
<style type="text/css">
/
*
1、通过属性选择器选择到带有属性 v-cloak的标签让他隐藏
*/
[v-cloak]{
/* 元素隐藏    */
display: none;
}
</style>
<body>
<div id="app">
<!--2、让带有插值语法的添加 v-cloak 属性
在数据渲染完成之后，v-cloak 属性会被⾃动去除，
v-cloak⼀旦移除也就是没有这个属性了属性选择器就选择不到该标签也就是对应的标签会变为可见
-->
<div  v-cloak  >{{msg}}</div>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm =new Vue({
//  el  指定元素 id 是 app 的元素
el:'#app',
//  data  ⾥⾯存储的是数据
data:{
msg:'Hello Vue'
}
});
</script>
html href属性</body>
</html>
v-html、v-text、v-pre、v-once
v-text ----填充纯⽂本、没有闪动问题
v-html ----填充html⽚段、会解析标签(存在安全问题、第三⽅数据不推荐同) v-pre  ----填充元素信息不编译
v-once ----只编译⼀次
双向数据绑定
双向数据绑定
-当数据发⽣变化的时候，视图也就发⽣变化(数据改变页⾯)
-当视图发⽣变化的时候，数据也会跟着同步变化(页⾯影响数据)
v-model
v-model是⼀个指令，限制在<input>、<select>、<textarea>、components中使⽤
v-model本质:
通过V-bind去绑定属性值、
热后通过input事件去处理值的变化
<div id='app'>
<div>{{msg}}</div>
<!-- v-model的本质：通过v-bind绑定属性值、然后通知input事件去处理值的变化--> <input type="text" v-bind:value='msg' @input='handle'>
<input type="text" v-bind:value='msg' @input='msg=$event.target.value'>
<input type="text" v-model='msg'>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script>
/*v-model指令的本质*/
var vm =new Vue({
el:'#app',
data:{
msg:'hello'
},
methods:{
handle:function(event){
//输⼊域中最新的数据覆盖原来的数据
this.msg = event.target.value;
}
}
})
</script>
mvvm
m：模型：数据
v：视图：元素
vm：视图模型：控制逻辑
view 通过影响(Listeners) model
model 通过数据劫持(Object.definedProperty)改变 view
事件绑定v-on
-⽤来绑定事件
-形式如：v-on:click  缩写为 @click;
v-on事件函数中传⼊参数
<!--1、如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第⼀个参数-->
例如:<button v-on:click='handle1'>点击1</button>
(默认传递$event)
<!--2、函数调⽤的⽅式、**推荐使⽤**、-->
<button v-on:click='handle2(123, 456, $event)'>点击2</button>
(事件对象的名称必须是$event、顺序要与形参对应)
事件修饰符
Vue 不推荐我们操作DOM 、为此Vue.js 为 v-on 提供了事件修饰符
修饰符是由点开头的指令后缀来表⽰的
<!--阻⽌单击事件继续传播-->
<a v-on:click.stop="doThis"></a>
<!--提交事件不再重载页⾯-->
<form v-on:submit.prevent="onSubmit"></form>
<!--修饰符可以串联即阻⽌冒泡也阻⽌默认事件-->
<a v-on:click.stop.prevent="doThat"></a>
<!--只当在 event.target 是当前元素⾃⾝时触发处理函数-->
<!--即事件不是从内部元素触发的-->
<div v-on:click.self="doThat">...</div>
使⽤修饰符时，顺序很重要；相应的代码会以同样的顺序产⽣。因此，⽤ v-on:click.prevent.self 会阻⽌所有的点击，⽽ v-on:click.self.prevent 只会阻⽌对元素⾃⾝的点击。
按键修饰符
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符
<!--只有在`keyCode`是13时调⽤`vm.submit()`-->
<input v-on:keyup.13="submit">
<!---当点击enter 时调⽤`vm.submit()`-->
<input ="submit">
<!--当点击enter或者space时时调⽤`vm.alertMe()`-->
<input type="text" space="alertMe">
常⽤的按键修饰符
.enter =>    enter键
.tab => tab键
.delete(捕获“删除”和“退格”按键)=>删除键
.esc =>取消键
.space =>空格键
.up =>上
.down =>下
.left =>左
.
right =>右
<script>
var vm =new Vue({
el:"#app",
methods:{
submit:function(){},
alertMe:function(){},
}
})
</script>
⾃定义按键修饰符别名
在Vue中可以通过config.keyCodes⾃定义按键修饰符别名

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。