前端入门学习笔记（三十四）vue.js入门（二）vue helloworld

最新推荐文章于 2024-07-14 12:36:42 发布

TUTsmile

最新推荐文章于 2024-07-14 12:36:42 发布

阅读量155

点赞数

本文链接：https://blog.csdn.net/TUTsmile/article/details/99706377

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

0.vue项目式hello world

大致可以按照以下步骤
安装node.js，之后就可以在命令行中使用npm命令
npm install vue，安装vue
npm install vue-cli -g ，全局安装vue-cil
npm install webpack -g，全局安装webpack
如果速度比较慢的话，可以使用命令
npm config set registry https://registry.npm.taobao.org
这样可以将npm 永久改为淘宝源

vue init webpack ”项目名称“，一路yes
npm install
npm run dev
这样就生成了一个hello world项目，不过此次部分学习笔记不会记录vue项目式相关的内容

1.在html导入vue

在head标签中导入

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

我的话是把vue文件下载到本地进行导入，两种方法都可以

<head>
    <script src="./vue.js"></script>
 </head>

2. 声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统

  <body>
    <div id="app">
      <!-- {{ }}是vue的语法，用于输出对象属性和函数返回值，
        里面不仅可以写js变量， 还可以写一些简单的表达式，比如三目运算符，累加等等，
        当里面写方法的时候，必须要在vue的methods中声明。 -->
      {{ content }}
    </div>
    <script>
      let app = new Vue({
        // el提供一个在页面上已存在的 DOM 元素
        // 作为 Vue 实例的挂载目标。
        // 此处div id = "app",
        // el：'#app'将id为的app的DOM元素作为挂在目标
        el: '#app',
        data: {
        // 对应div 标签中的 content
          content: 'hello world'
        }
      })
    </script>
  </body>

3.操作vue的内部对象

如果我们想要更改content的内容，有什么办法呢？最简单的方法是在vue中添加method方法，不过这个放在之后再说，此处先说用原生的js如何对vue内部对象进行操作。

我们可以将script标签中的代码改写为如下所示

      let app = new Vue({
        el: '#app',
        data: {
          content: 'hello world'
        }
      })

      setTimeout(function() {
        app.$data.content = 'bye world'
      }, 1000)

setTimeout这个官方函数的效果是经过多少ms后，调用里面的function。
app比较好理解，因为我们使用let声明了一个名为app的vue对象。但是$是怎么回事呢？
其实$的话，看文档的介绍，是内部函数的一种特殊命名方式。data是vue的内部函数，此外还有method，computed等内部函数，他们前面都需要加上$，这样可以最大程度的和用户的自定义的属性区分开来。

不过之后我们大概率不会用这种方式对vue的内部数据进行处理，此处这样写只是为了$这个知识点

TUTsmile

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端入门学习笔记（三十四）vue.js入门（二）vue helloworld

0.vue项目式hello world大致可以按照以下步骤安装node.js，之后就可以在命令行中使用npm命令npm install vue，安装vuenpm install vue-cli -g ，全局安装vue-cilnpm install webpack -g，全局安装webpack如果速度比较慢的话，可以使用命令npm config set registry https...
复制链接

扫一扫

专栏目录