-
<!DOCTYPE html>
<!-- 在挂载点中输出文档的3种方式：
1、插值表达式,如：{{msg}}；
2、v-text(转义输出);
3、v-html(不转义输出);
绑定事件方法：
1、先在挂载点中插入单击事件：v-on:click='事件名'，v-on:可简写成@
2、在实例中增加methods:{事件名:function(){}}
绑定属性方法：
v-bind:属性名 //可缩写成:
双向数据绑定：
v-model='数据'
释义：即，改变控制内容的时候，数据也随之变化，改变数据的时候控，控制内容也随之变化。
-->
<html>
<head>
<title>vue实例中的数据、事件和方法</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="div1">
<div v-html='msg' @click='click' :title='123+title'></div>
<!-- 当控件的value发生改变时，会改变绑定的数据（在实例的data中）,从而导致div2的内容也发生改变（因为这个DIV也绑定了content） -->
<input type="text" v-model='content'>
<div id="div2">输入：{{content}}</div>
</div>
<script>
new Vue({ //此处的V要大写，否则报错
el:'#div1',
data:{
title:'这是标题',
msg:'<h3>hello</h3>', //在这里加入标签，Vue会在挂载点中创建一个子节点标签，不会像在模板中会替换然掉挂载点标签。
content:'123',
},
methods:{
click:function(){
this.msg='world';
}
}
})
</script>
</body>
</html>
查看全部 -
<!DOCTYPE html>
<!-- 在挂载点入输出文本的3种方式：
1、插值表达式,如：{{msg}}；
2、v-text(转义输出);
3、v-html(不转义输出);
绑定事件方法：
1、先在挂载点中插入单击事件：v-on:click='事件名'，v-on:可简写成@
2、在实例中增加methods:{事件名:function(){}}
-->
<html>
<head>
<title>vue实例中的数据、事件和方法</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<!-- 看下面，挂载点的三要素：
1、绑定名
2、插入方式
3、事件
-->
<div id="div1" v-html='msg' @click='click'>
<!-- {{msg}} ,此为插值表达式-->
</div>
<script>
new Vue({
el:'#div1',
data:{
msg:'<h3>hello</h3>'
},
methods:{
click:function(){
this.msg='world';
}
}
})
</script>
</body>
</html>
查看全部 -
基础知识>>案例实践>>TodoList>>Vue-cli>>TodoList
查看全部 -
v-if控制dom存在，v-show控制dom的显示，v-for控制dom的循环
查看全部 -
computed，一个属性通过其他属性计算而来，当其他属性没有变化的时候会利用上次的缓存值，不会重新计算。
查看全部 -
利用v-model跟content进行双向绑定
查看全部 -
用v-bind进行绑定data中的title属性中
查看全部 -
局部样式<style scoped></style>
scoped声明局部作用域
查看全部 -
template模板中只可以包含一个最外层的html标签
子组件中的data是一个函数
查看全部 -
vue安装（需要先安装node，，略）
用脚手架工具创建项目
1、npm install -global vue-cli 全局安装vue脚手架工具 vue-cli
2、vue init webpack my_project 创建一个基于webpack模版的新项目
3、cd my-project 进入到项目目录
4、npm run dev 运行项目
主要编写scr目录下的文件，main.js是整个项目的入口文件
查看全部 -
父组件、子组件
父组件通过属性向子组件传递数数据，子组件通过发布定义模式向父组件传递数据
this.$emit('delete', this.index) 向外触发delete自定义事件
查看全部 -
每一个vue组件都是一个vue实例。
查看全部 -
父组件、子组件（略）
全局组件：props（参数数组）接收外部传递进来的属性，template模板
局部组件：通过components声明
查看全部 -
自定义事件也可以用于创建支持
v-model的自定义输入组件。记住：<input v-model="searchText">
等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
因此子组件触发事件，传来的值必须是
$event.target.value
当用在组件上时，
v-model则会这样：<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
为了让它正常工作，这个组件内的
<input>必须：将其
value特性绑定到一个名叫value的 prop 上在其
input事件被触发时，将新的值通过自定义的input事件抛出
写成代码之后是这样的：
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > `})现在
v-model就应该可以在这个组件上完美地工作起来了：<custom-input v-model="searchText"></custom-input>
查看全部 -
父组件可以监听子组件的事件，二者之间传递参数时vue里面的重点，难点，已定稿清楚
查看全部
举报