-
属性绑定与双向数据绑定：
<div id="root">
<div v-bind:title="title">{{msg}}</div>
<input v-model="msg">//v-model双向数据绑定
<div :title="title">{{msg}}</div>//:(v-bind:的简写)属性绑定
</div>
实例：
new Vue({
el:"#root",
data:{
msg:"hello",
title:"this is my word"
}
})
查看全部 -
vue实例中的数据、事件与方法
<div id="root">
<h1>{{msg}}</h1>//插值表达式
<h1 v-text="msg"></h1>//输出转义后的内容，即纯文本
<h1 v-html="msg"></h1>//输出未转义的内容，即可输出HTML内容
</div>
<div id="root1" v-text="msg"> //使用了标签之后，vue实例msg将覆盖内容，即包含的三个h1被移除
<h1>{{msg}}</h1>
<h1 v-text="msg">kkkk</h1>//kkkk内容被msg覆盖
<h1 v-html="msg"></h1>
</div>
面向数据编程：
<div id="root">
<div v-on:click="handleClick">{{msg}}</div>//绑定方法
<div @click="handleClick">{{msg}}</div>//@（v-on:的简写）
</div>
new Vue({
el:"#root",
data:{//数据项
msg:"hello"
},
methods:{//实例中的方法
handleClick:function(){
alert(123)
this.msg="world"//this指的是本实例，数据驱动视图，想改变数据的显示不再需要改变dom内容，直接改变数据项的内容，数据发生变化，vue自动更新dom
}
}
})
查看全部 -
挂载点，模板，实例之间的关系
<div id="root">//挂载点，vue只处理挂载点中的内容
<div></div>//模板
</div>
<div id="root"><div>//挂载点，挂载点之内的内容就是模板
实例（可以有多个，分别操作不同的dom对象）：
new Vue({
el:"root",
template:'<h1>hello {{msg}}</h1>',//模板，可以写在挂载点内部，也可以写在实例中的template属性里，都写了则实例中的覆盖挂载点
data：{
msg:"hello world"
}
}）
查看全部 -
安装（小白级别）：
开发环境：
1、引入vue.js文件<script src="./vue.js"></script>
2、引入CDN<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
生产环境：安装生产版本，或者CDN版本带上版本号
引入：
在<head>标签中引入，防止抖屏。
创建实例：
<div id="root">
<h1>{{msg}}</h1>
</div>
在<script>中new Vue()
<div id="root">{{msg}}</div>
new Vue({//传参
el:"root",//绑定dom，Vue不推荐开发者直接操作dom
data：{//保存vue实例中的数据
msg:"hello world"
}
}）
原生写法（手动操作dom）：
var dom = document.getElementById("root")
dom.innerHTML = "hello world"
查看全部 -
全局样式：对多个组件有效；
<style> ... </style>
局部样式：对当前组件有效。
<style scoped> ... </style>
一般使用局部样式，可以对组件样式进行解耦。
查看全部 -
在之前使用new Vue定义一个Vue实例(组件)时，数据存放在data对象里，代码如下：
new Vue({ el: '#app', data: { msg: 'hello vue' } })但使用vue-cli时，存放数据的data属性不再是对象了，而是一个函数，函数的返回值是一个对象。
export default { data: function() { return { msg: 'hello vue' } } }使用ES6语法简化为：
export default { // data () {} 表示data是一个函数 data () { return { msg: 'hello vue' } } }查看全部 -
<template>...</template>标签内部只允许有一个根标签（如div），即所有的标签要包裹在一个根标签内，代码如下：
<template> <div> <div>...</div> <ul>...</ul> ... </div> </template>
查看全部 -
父组件模板里的方法指的是父组件里的方法，子组件模板里的方法指的是子组件里的方法。
父组件：new Vue(...)，父组件的模板(template)：div#app里的所有DOM标签
子组件：Vue.component(...)，子组件的模板(template)：Vue.component('todo-item', {template: '...'})中的template属性
查看全部 -
子组件向外部进行一个发布（触发事件），那么父组件在模板里创建子组件的时候，同时可以监听子组件触发的事件
查看全部 -
父/子组件如何通信：
父组件向子组件传值是通过在组件上绑定属性的方式，如:content、:index这两个属性
子组件向父组件传值是通过发布-订阅模式，子组件通过this.$emit('事件', '值')方法触发事件传递值，父组件监听对应事件可以获取到传递过来的值
查看全部 -
在Vue中，父组件向子组件传递值是通过属性的形式。
查看全部 -
每一个Vue组件都是一个Vue实例，也可以说每一个Vue实例都是一个Vue组件。对于代码中的new Vue(...)这个大的Vue实例来说，它里面如果没有定义template属性的话，那就会把挂载点标签(<div id="app">...</div>)中的所有DOM标签当做template(模板)。
查看全部 -
使用Vue.component()方法来定义Vue的组件。
每一个Vue的组件都是一个Vue的实例，一个Vue项目就是由很多Vue的实例组成。
既然每一个Vue的组件都是一个Vue的实例，那么在定义组件时也可以有data、template、methods等属性
查看全部 -
概念：Vue实例、挂载点、模板、组件
Vue实例：new Vue({...})
挂载点：<div id="app">...</div>
模板：挂载点内的代码
组件：Vue.component(...)
查看全部 -
v-if：该指令控制元素的存在与否
v-show：该指令控制元素的显示与否，通过来实现
v-for：该指令控制元素的循环。通常每个元素要带上:key属性来提升页面元素渲染的性能
查看全部
举报