课程分类

Chrome浏览器 直接进入Chrome商店安装 https://chrome.google.com/webstore/detail/vuejsdevtools/nhdogjmejiglipccpnnnanhbledajbpd FireFox浏览器 https://addons.mozilla.org/enUS/firefox/addon/vuejsdevtools/ 参考 https://devtools…

文本插值 使用 {{ 变量名 }} html template div p{{ message }}/p /div /template script export default { data() { return { message: "hello", }; }, }; /script 需要注意的是…

vif html template div h1 vif="active"你猜这里显示了吗？/h1 hr / template vif="active" h2如果有多个元素/h2 p外层…

vfor的基础使用 通常使用 vfor="单数 in 复数"的写法。 key不是必须的，但为了给 Vue 一个提示，以便它能跟踪每个节点…

监听事件 html template div 你点了{{ count }}次 hr / button von:click="inc"点这里/button hr / button @click="inc"简化写法，点这里…

vmodel基础 你可以用 vmodel 指令在表单 input、textarea 及 select 元素上创建双向数据绑定。它会根据控件类型自动选取…

用法 html template div input vmodel="lastName" placeholder="姓" / br /br / input vmodel="firstName" placeholder="名" / br /br / 你的全名是：{{ fullName }} /div /template…

beforeCreate 实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据。 常用于初始化非响应式变量…

绑定 HTML Class html template div div vbind:class="{ active: isActive }"长乐未央Vue教程/div /div /template script export default { data() { return { isActive: true, } } } …

定义方法 新建 src/components/Child.vue 文件 html template h2hello, 长乐未央/h2 /template script export default {} /script 父组件，也就是src/views/Home.vue…

传递静态值到子组件 父组件 html template div 传递 name 到子组件 Child name="Aaron"/ Child name="Pipi"/ Child name="Daniel"/ …

什么是插槽 插槽就是子组件中提供给父组件使用的一个占位符，用 slot/slot 表示，父组件可以在这个占位…

动态组件 动态组件是让多个组件使用同一个挂载点，并动态切换。动态组件是 Vue 的一个高级用法，但其实它的使用…

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块…

$root 使用$root可以访问到new Vue根实例中的数据和方法 修改src/main.js文件 js import Vue from 'vue'; import App…

父组件 src/views/Home.vue html template div button @click="handleClick"点击父组件，调用子组件的方法/button Child ref="child" / /div …

父组件 src/views/Home.vue html template div button @click="handleClick"查看/button Child / Child / /div /template script import Child from '../components/Child'; export…

父组件 src/views/Home.vue html template div Child / /div /template script import Child from '../components/Child'; export default { components: { Child }, methods: { message() { console.log…

我们都知道，父组件可以使用 props 把数据传给子组件，那么子组件如何触发父组件的自定义事件呢？这时候，我们得用到…

介绍EventBus 前面我们讲过父传子，子传父进行数据传递和方法调用，这时候当组件嵌套比较深或比较复杂的情况…