-
v-bind ::
v-on: @v-model:double
查看全部 -
事件绑定：v-on: 可简写成@
属性绑定：v-bind: 可简写成:
查看全部 -
vue 组件的样式<style scoped></style>可以让样式只作用于组件内容，防止影响其他地方样式
查看全部 -
v-if控制节点删除与否，v-show利用display：none控制显隐
查看全部 -
{{msg}}差值表达式
查看全部 -
vue.JS 最好放在head里面引入，防止页面抖屏
查看全部 -
//========[Vue属性绑定与双向数据绑定]========//
/*********************/
<div id="root">
<div v-bind:title="title">{{msg}}</div>
<input v-modal="content"/>
<div>{{content}}</div>
</div>
<script type="text/javascript">
new Vue({
el: "#root",
data: {
title:"this is hello world",
content:"this is content"
}
})
</script>
/*********************/
【v-bind】绑定一个属性，指令可简写成":"
【v-bind:title="title"】当前title属性与title数据项进行绑定
【v-modal】双向数据绑定指令
查看全部 -
/*********************/
<div id="root">
(-1-)<h1>SAY: {{msg}}</h1>
<h1 v-text="number">/h1>
<div v-html="content"></div>
<div v-on:click="handleClick">{{msg}}</div>
</div>
<script type="text/javascript">
// Vue实例与DOM元素绑定
new Vue({
el: "#root",
(-2-)template: '<h1>SAY: {{msg}}</h1>',
data: {
msg: "hello world!",
number: 123,
content:"<h1>hello</h1>"
},
methods:{
handleClick: function(){
this.msg = "world"
},
}
})
</script>
/*********************/
【<div id="root"></div>】Vue实例的挂载点
Vue只会处理挂载点里面的内容
模板：模板是挂载点里面的内容
两种方式创建模板：(1)写在挂载点内部 (2)写在vue实例里面
【{{msg}}】插值表达式：两个花括号里面写内容的方法
【v-text="number"】
【v-html="content"】
"v-text"：会进行转义，将标签原封不动输出
"v-html"：不会转义
【"v-on:click"】绑定一个事件，事件为点击事件
【handleClick】一个函数，函数定义在实例的methods属性里
【this.msg】vue实例下data里面的content的内容
"v-on"指令可简写成"@"
查看全部 -
vue-cli里面写data是一个函数
查看全部 -
父组件到子组件通过属性的形式进行值的传递;
子组件通过发布事件,是父组件之前就订阅事件,那么子就向父传递数据了;
发布订阅模式
$emit('delete',this.index )
查看全部 -
组件就实例,实例就是组件;
组件由template(模板),props(接受数据),methods;
组件中也可以加计算属性;
根实例找挂载点下所有的dom标签为模板;
查看全部 -
全局组件
Vue.component('') Vue提供的创建组件的方法;
template 创建组件的模板
局部组件
props接受传来的参数
查看全部 -
V-model :用于双向数据绑定
V-bind:用于属性值绑定
查看全部 -
VUE点击事件绑定，v-on:click=""可以简化成@click="" 事件方法写在
methods:{}里
查看全部 -
Vue操作数据欧 ,学大家做一下笔记,哈哈哈~
查看全部
举报