Vue入门

作者: 沧海水i | 来源:发表于2019-03-06 18:02 被阅读0次

一.起步练习

1.首先通过CDN引入Vue.js

image.png

2.写入vue-app根容器

image.png

3.实例化Vue对象

image.png

4.预览

image.png

二.v-model双向绑定练习

1.首先在根容器中输入“input”自动生成

image.png

2.修改自动生成代码为

image.png

3.此时运行出现如下效果: image.png

4.我们在输入框内输入:wang 会出现以下效果

image.png

5.再在代码中输入 wang 也会出现同上效果 image.png

6.这就是v-model的双向绑定

三.v-bind绑定data中的属性

image.png

相关文章

  • Vue 入门到实战课程

    Vue 入门到实战课程 说明 课程 VueCli3.0-小白入门 Vue2.0 小白入门教程 Vue 项目实战 在...

  • VUE系列教程目录

    VUE系列教程目录 vue入门之路篇系列教程: vue最简单的入门教程+实战+Vue2+VueRouter2+we...

  • VUE系列教程目录

    VUE系列教程目录 vue入门之路篇系列教程:vue最简单的入门教程+实战+Vue2+VueRouter2+web...

  • 01vue-安装vue

    资源 1.Vue.js2.0从入门到放弃---入门实例(一)2.Vue.js入门学习(一)3.Vue官方中文Api...

  • Vue.js状态管理工具Vuex快速上手

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue2简单入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js再入门

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • Vue.js使用vue-router构建单页应用

    Vue2简单入门 Vue.js再入门 Vue.js使用vue-router构建单页应用 Vue.js状态管理工具V...

  • vue基础入门

    vue基础入门

  • 【前端全栈】1.从入门到工作

    2020年大热的前端技术:Vue3/TS/Flutter 1、分阶段: 先导(JS入门、Vue入门等) 入门阶段(...

网友评论

    本文标题:Vue入门

    本文链接:https://www.haomeiwen.com/subject/egyzuqtx.html