Vue第一篇：菜鸟入门之vue简介

最新推荐文章于 2024-07-10 18:13:56 发布

caijunsen

最新推荐文章于 2024-07-10 18:13:56 发布

阅读量368

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/caijunsen/article/details/107226630

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、简介

vue 是MVVM框架

二、vue的最基本使用

html 引入vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-if / v-show / v-bind / v-for</title>
    <link rel="stylesheet" href="common.css" type="text/css" />
</head>
<body>
<div id="app">
  {{name}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script type="text/javascript">
 var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google'
  }
})
</script>
<body>
</body>
</html>

data怎么绑定到视图里面呢？可以通过模版标记的形式：{{name}}

<div id="app">{{name}}</div>

在vue对于V和M的体现就在于var vue中，通过vue实例el将数据绑定到了视图，也就是html当中，如果将vue实例直接绑定到下方的div中

//实例vue	el绑定元素	data数据	vue后面还有一系列如method等属性
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google'
  }
})

在这里插入图片描述

参考文章：https://blog.csdn.net/Sicily_winner/article/details/89313905

caijunsen

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue第一篇：菜鸟入门之vue简介

一、简介vue 是MVVM框架二、vue的最基本使用html 引入vue.js<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-if / v-show /
复制链接

扫一扫

专栏目录