个人技术博客：VUE：0基础入门

本博客面向有一定HTML,JS基础，但对VUE没什么了解的初学者

参考教程：VUE官方教程 ，菜鸟教程：VUE

VUE.js简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

VUE的官方文档无论是对初学者还是专业人员都很有帮助！
点此进入VUE官网

VUE 的安装

- CDN引入方式

在页面文件直接插入以下代码即可
<script>https://unpkg.com/vue/dist/vue.js</script>

- 下载VUE.js到本地再引入

点击链接下载后，在页面文件中用引入 点此下载vue.min.js

NPM方式安装VUE-CLI(脚手架）

请先确保您安装了node.js 3.0及以上版本

VUE脚手架适合较大项目开发，如果只是做VUE的小案例可以不用脚手架，但也推荐您安装VUE-CLI

方法1:在命令行中输入
npm install -g vue-cli
方法2：使用国内镜像安装，命令行输入
npm install -g cnpm -registry=https://registry.npm.taobao.org
回车后，
cnpm install -g vue-cli

VUE的声明式渲染

  • HTML 部分
<div id="app">
  {{ message }}   
</div>
  • JS部分
var app = new Vue({  //创建VUE实例
  el: '#app',        //将实例挂载到#app上
  data: {            //定义数据
    message: 'Hello Vue!'
  }
})

其中 {{ message }}称作mustache语法，表示对应VUE实例中的message值
所以页面上显示：Hello Vue!

条件与循环

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

由v-if指令控制元素是否显示，seen为true时显示，为false时不显示

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>

new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})

语法v-for表示循环显示，'site in sites'中的site可以理解为形参，代表数组中的每一项，sites对应data中的sites数组
那么要循环显示的元素则为site.name 。最终显示效果如下：

  • Runoob

  • Google

  • Taobao

posted @ 2020-06-15 21:31  炽_风  阅读(235)  评论(0)  编辑  收藏  举报