vue教程(白痴教程)

最新推荐文章于 2023-12-14 17:06:28 发布

K--kkkkk

最新推荐文章于 2023-12-14 17:06:28 发布

阅读量129

点赞数

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_50889870/article/details/117361152

版权

这篇Vue教程详细介绍了Vue的基础概念和用法，包括如何引入Vue、声明式渲染、创建Vue实例、数据绑定、方法、插值、原生HTML内容、指令如v-if和v-on，以及缩写的使用。教程特别强调了数据绑定的双向性，方法的事件监听，以及使用v-html和v-bind指令的安全注意事项。

摘要由CSDN通过智能技术生成

引入vue

下载vue.js文件：点击下载
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
CDN线上，引入地址：https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js"></script>
新建html文件，在head标签内引入

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    <!-- //内容 -->
    </div>

    {
  { 1+2 }}
    <script>
      new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>

声明式渲染

两个花括号中间可以写表达式，判断，数据类型，就是不能写循环。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>引入vue</title>
    <script src="../js/vue.js"></script>
  </head>
  <body>
    <div id="app">
    {
  { msg }}
    </div>
    {
  { msg }}
    <script>
      new Vue({
       el: '#app',
       data: {
         msg: '111'
       }
      })
    </script>
  </body>
</html>

创建vue实例

首先引入vue.js文件

<!DOCTYPE html>
<html lang="en">
<

最低0.47元/天解锁文章

K--kkkkk

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue教程(白痴教程)

目录引入vue声明式渲染创建vue实例数据绑定方法插值指令缩写引入vue下载vue.js文件：点击下载<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>CDN线上，引入地址：https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.common.js script src="https://cdn.bootcss.com/vue/2.5
复制链接

扫一扫