Vue基础学习1

作者: 沃土前端社区_子鸣 | 来源:发表于2018-01-17 20:22 被阅读0次
1、vue的介绍
  • Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。
  • Vue 只关注视图层, 采用自底向上增量开发的设计。
  • Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
2、Vue的简单应用,常用语法
1、vue的引入

新手不建议直接使用webpack自动化构建vue应用,这个我们后面会讲。现讲2种简单的方式

(1)直接引用,引用地址为:

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

(2)直接下载,在引入下载包使用。

2、vue的简单渲染实例
  • 文本赋值 {{value}}
  • 表单赋值 v-model
  • 属性绑定 v-bind或 ":"
  • 事件绑定 v-on: 或 "@"
  • 实例化vue:new Vue
html代码:
  <html>
    <head>
      <title>vue的简单实例</title>
      <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    <body>
      <div  id="app">
         <p :class="colorClass">这是插入的一段文本{{msg}}</p>
        <input type="text" v-model="msg"/>
        <button @click="prompt">点击弹出输入值</button>
      </div>
    <body>
  </html>
js代码:(本例使用的版本为v2.5)
  var vm = new Vue({
      el:"#app",      //绑定根节点
      data:{      //数据源
         msg:"",    //消息初始化为空
         colorClass:"classa"
      },
      methods:{
        prompt:function(){
            alert(this.msg);
        }
      }
  })

第一小节到此结束,附一张vue的生命周期图,后面的很多场景都需要用到

image.png

相关文章

  • Vue学习总结(2019.7.31-8.4)

    Vue学习总结 目录 vue基础知识(1-13)vue 引入,实例化vue 数据 & 方法vue 绑定(:)vue...

  • vue2 基础学习02 (Vue组件)

    vue2 基础学习02 (Vue组件) vue学习路径和建议----尤雨溪 vue官网 1.Vue组件 参考官方文...

  • Vue学习(1)Vue基础

    安装和导入 有多种方式使用Vue: 下载js文件 下载开发版本下载运营版本下载完成后,放在html同目录下时,在h...

  • bunny笔记|vue框架和库的区别

    学习vue前的基础 基础理解1.HTML2.CSS3.JavaScript4.ES6升级理解1.vue-route...

  • Python 高端课程培训,CMDB自动化运维培训!

    1、入门小基础(8个课时): 1、沙盒环境,py环境安装使用 2、vue 基础语法与组件学习 3、vue + el...

  • Vue基础学习1

    1、vue的介绍 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架。 Vue...

  • (24)打鸡儿教你Vue.js

    学习Vue基础语法Vue中的组件Vue-cli的使用 1、使用Vue2.0版本实现响应式编程2、理解Vue编程理念...

  • 前端测试

    目录 目录 1. 前端基础1.1 布局1.1.1 grid布局 2. Vue 学习笔记2.1 Vue模板创建 前端...

  • 1.Vue第一章

    1.Vue的应用 2.vue的特点 3.Vue实现的功能 4.这一章的内容 5.学习Vue的具备的基础 6.学习V...

  • 2018-12-20

    继续学习vue,学了组件基础。

网友评论

    本文标题:Vue基础学习1

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