-
每个组件都是一个Vue实例, 每个实例也相当于一个组件 , [实例 = 组件]
查看全部 -
<ul> <todo-item v-for="(item, index) of list" :key="index" :content="item"></todo-item> </ul>
全局组件
通过Vue.component定义的组件是全局组件, 可以在任何地方使用
Vue.component('todo-item', { props: ['content'], //这个组件接收从外部传进来的叫 content的属性 template: '<li>{{content}}</li>' });局部组件: 必须在new Vue()内注册声明
var TodoItem = { template: '<li>item</li>' }new Vue({ el: '#root', data: { list: [] } // components: { 'todo-item': TodoItem } //注册局部组件 });查看全部 -
this.list.push(this.inputValue);
查看全部 -
v-if 是否存在
v-show 是否显示, 其实就是控制 display: block || none;
v-for 循环, 添加 :key 提升渲染效率/性能, 要求每一项循环的key 不一样, 也可用 :key="index", 如果对列表进行频繁的变更, 比如排序时, 使用 index 就不适合了
<li v-for="(item index) of list" :key="item">{{item}}</li>查看全部 -
属性绑定: v-bind:title 可简写为 :title
<div v-bind:title="title">hello</div>
双向数据绑定: v-model
<input v-model="cont" /> <div>{{cont}}</div>new Vue({ el: '#root', data: { title: 'this is title', cont: 'this is v-model' } });查看全部 -
v-text: 会进行一次转译, v-html: 不会转译
v-on:click="方法名"，简写为 @click="方法名"。事件对应methods属性中
<div v-text="cont">输出'<h1>hello</h1>'</div> <div v-html="cont">只输出'hello'</div> <div v-on:click="handleClick">{{msg}}</div>new Vue({ el: '#root', data: { cont: '<h1>hello</h1>', msg: 'hello' }, methods: { handleClick: function() { this.msg = 'world'; } }})
查看全部 -
模板: 挂载点内部的内容,
挂载点: id="root"所在的div,
实例: 定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中
<div id="root"> <h1>hello {{msg}}</h1> /*模板可以写在这里*/ </div>new Vue({ el: '#root', //挂载点, template: '<span>111</span>', //模板也可以写在这里 data: { msg: 'world' }查看全部 -
v-if这个属性控制button存在与否
v-show这个属性控制button显示与否
v-for用来控制一组数据，通过这组数据来循环显示出一些页面上的button结构
查看全部 -
v-bind:title=' ' 属性绑定,可简写成 :title
v-model={{content}} 双向绑定
查看全部 -
v-html不会转译
v-text会进行一次转译
v-on模板指定，你要绑定的事件 加click=“函数” 方法要在new实例methods里面 this.content来改变数据
事件绑定简写@click
查看全部 -
挂载点，模板，实例之间的关系
挂载点
模板就是挂载点内部的内容，也可以写在template属性里面
实例里面指定一个挂载点，然后把模板写上。new会自动的结合生成最终的内容，然后自动放在挂载点之中
查看全部 -
<!--创建vue实例--> <div id="root">{{msg}}</div>new vue({ el: '#root //挂载点 data: { msg: 'hello world' } });<script>标签引入vue.js放置<head>标签中，防止出现抖屏现象
查看全部 -
vue-cli 安装查看全部 -
插值表达式 {{}} v-text v-html
事件 v-on:click="handleClick" 简写 @click="handleClick"
模板指令 v-bind:title=" 'dell lee' + title" 简写 :title="title"
双向绑定
--<input :value="content"/> 属性绑定
<input v-model="content"/> 双向数据绑定
计算属性
<input v-model="firstName"/>
<input v-model="lastName"/>
<div>{{fullName}}</div>
侦听器
v-if 移除/添加 DOM v-show 显示/隐藏 v-for <li v-for="(item,index) of list" :key="index">{{item}}</li> :key 提升渲染效率 不能重复
子组件向外触发事件
this.$emit('delete',this.index)
监听子组件事件
<todo-item @delete="handleDelete"></todo-item>
new Vue({
el:"#id",
data:{
content:"hello",
title="this is hello world",
firstName:'',
lasrName:'',
count:0,
list:[1,2,3]
},
template:'',
computed:{
fullName:function(){
return this.firstName + this.lastName
}
},
watch:{
firstNme:function(){
this.count++
}
fullName :function(){
this.count++
}
},
methods:{
handleClick:function(){
this.content="world";
},
handleDelete:function(index){
this.list.splice(index,i)
}
}
})
查看全部 -
用脚手架工具创建项目
1、npm install -global vue-cli 全局安装vue脚手架工具 vue-cli
2、vue init webpack my_project 创建一个基于webpack模版的新项目
3、cd my-project 进入到项目目录
4、npm run dev 运行项目
查看全部
举报