学习笔记编写vue的第一个程序

目录
  • 1、编写一个html，第一个vue程序
  • 注意视图模板和数据
    • 判断循环
    • 事件
  • 787原则
    • el属性
    • data属性
    • template属性
    • methods属性
    • render属性
    • computed属性
    • watch属性

这里使用官方文档的cdn

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

1、编写一个html，第一个vue程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--view层   模板-->
<div id="app">
    {{message}}
</div>
 <!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
 <script>
    var vm = new Vue({
        el:"#app",
        //model：数据
        data:{
            message:"hello,vue"
        }
    });
 </script>
 </body>
</html>

注意视图模板和数据

View视图

Model模型

ViewModel：双向绑定就是  你们前端数据改变 你们data中的数据也会改变

可以在页面不刷新的情况下改变数据然后同步到前端显示

判断循环

if

for

事件

on

787原则

学习vue我们必须知道它的7个属性，8个 方法，以及7个指令

el属性

用来指示vue编译器从什么地方开始解析 vue的语法，可以说是一个占位符。

data属性

用来组织从view中抽象出来的属性，可以说将视图的数据抽象出来存放在data中。

template属性

用来设置模板，会替换页面元素，包括占位符。

methods属性

放置页面中的业务逻辑，js方法一般都放置在methods中

render属性

创建真正的Virtual Dom

computed属性

用来计算

watch属性

watch:function(new,old){}

监听data中数据的变化

两个参数，一个返回新值，一个返回旧值

以上就是学习笔记vue的第一个程序的详细内容，更多关于vue程序的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 学习vue.js计算属性

    关于vue.js的计算属性练习代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vuejs计算属性</title> </head> <body> <!-- 字母反转方式一:不推荐 --> <div id="app-1&quo

  • 深入学习Vue nextTick的用法及原理

    深入学习Vue nextTick的用法及原理

    Vue.nextTick是Vue官方给我们提供的一个API(方法),作用是在下次DOM更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的DOM: 那么我们的理解是:当数据发生变化之后,DOM视图并不会立即更新,如果我们在发生变化之后立马去获取某个节点或者某个节点的值,很有可能结果就是undefined:因为Vue实现响应式并不是数据发生变化之后DOM立即变化,而是按一定的策略进行DOM的更新: 来看一个小demo: App.vue <template> <div

  • 学习vue.js条件渲染

    本文实例为大家分享了vue.js中条件渲染的练习代码,供大家参考,具体内容如下 html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条件渲染</title> </head> <body> <!-- v-if 作为判断条件 如果满足则展示它所附着的元素的内容-->

  • 学习Vue组件实例

    Vue实例 项目启动过程 看一下现在我们的项目,想想整个项目的启动过程是什么(以直接打开index.html的方法访问为例来说明)? 你首先打开了index.html,里面只有一个写了一个id='root'的div,还有你引入了打包之后的代码,然后Vue自己肯定运行了一下(可以认为是Vue初始化). 接着,应该是执行了entry.js(因为打包是webpack打包的,你配置的入口文件就这一个). entry.js干了什么,是的,创建了一个Vue实例对象,然后这个对象管理的区域根据el属性知道,应

  • 简单学习vue指令directive

    本文为大家分享了vue指令directive的使用方法,供大家参考,具体内容如下 1.指令的注册 指令跟组件一样需要注册才能使用,同样有两种方式,一种是全局注册: Vue.directive('dirName',function(){ //定义指令 }); 另外一种是局部注册: new Vue({ directives:{ dirName:{ //定义指令 } } }); 2.指令的定义 指令定义,官方提供了五个钩子函数来供我们使用,分别代表了一个组件的各个生命周期 bind: 只调用一次,指令

  • 学习Vue框架中必掌握的重点知识

    学习Vue框架中必掌握的重点知识

    一.什么是vue vue是一套用于构建用户页面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合.另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动. 二.与原生JS的区别 我们可以通过一个小案例来演示 案例:把输入框中的信息实时显示在span标签中 原生JS <body> <input id='txt' type="text&qu

  • 学习笔记编写vue的第一个程序

    学习笔记编写vue的第一个程序

    目录 1.编写一个html,第一个vue程序 注意视图模板和数据 判断循环 事件 787原则 el属性 data属性 template属性 methods属性 render属性 computed属性 watch属性 这里使用官方文档的cdn <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> 1.编写一个html,第一个vue程序 <!DOCTYPE html>

  • Python学习笔记之Django创建第一个数据库模型的方法

    Django里面集成了SQLite的数据库,对于初期研究来说,可以用这个学习. 第一步,创建数据库就涉及到建表等一系列的工作,在此之前,要先在cmd执行一个命令: python manage.py migrate 这个命令就看成一个打包安装的命令,它会根据mysite/settings.py的配置安装一系列必要的数据库表 第二步,我们要建立一个Model层,修改demo/model.py: from django.db import models classQuestion(models.Mod

  • Vue 2.0学习笔记之Vue中的computed属性

    Vue 2.0学习笔记之Vue中的computed属性

    Vue中的 computed 属性称为 计算属性 .在这一节中,我们学习Vue中的计算属性如何使用?记得在学习Vue的模板相关的知识的时候,知道在模板内可以使用表达式,而且模板内的表达式是非常的便利,但这种遍历是有一定的限制的,它们实际上是用于一些简单的运算.也就是说,如果在模板中放入太多的逻辑会让模板过重而且难以维护.咱们先来看一个示例: <div id="app"> <h1>{{ message.split('').reverse().join('') }}

  • vue学习笔记之Vue中css动画原理简单示例

    本文实例讲述了Vue中css动画原理.分享给大家供大家参考,具体如下: 当transition包裹了一个元素之后,vue会自动分析元素的css样式,构建动画流程. so,我们需要定义style. vue中的css动画,其实就是某一个时间点,给元素再增加了一个css样式体现的. v-if.v-show.动态组件 都可以实现过渡效果. 如果没有给transition定义name,vue中默认是.v-enter..v-leave-to. <!DOCTYPE html> <html lang=&

  • vue mint-ui学习笔记之picker的使用

    vue mint-ui学习笔记之picker的使用

    本文介绍了vue mint-ui picker的使用,分享给大家,也给自己留个学习笔记 Picker的使用 import { Picker } from 'mint-ui'; Vue.component(Picker.name, Picker); API 示例一:picker的简单使用 xxx.vue: <template> <div id="app"> <mt-picker :slots="slots" ></mt-pic

  • Vue学习笔记进阶篇之函数化组件解析

    Vue学习笔记进阶篇之函数化组件解析

    这两天学习了Vue.js 感觉函数化组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记 介绍 之前创建的锚点标题组件是比较简单,没有管理或者监听任何传递给他的状态,也没有生命周期方法.它只是一个接收参数的函数. 在这个例子中,我们标记组件为 functional, 这意味它是无状态(没有 data),无实例(没有 this 上下文). 一个 函数化组件 就像这样: Vue.component('my-component', { functional: true, // 为了弥补缺少的

  • 关于Vue.js一些问题和思考学习笔记（1）

    前言 本文不是Vue.js的教程,只是一边看官网Vue的教程文档一边记录并总结学习过程中遇到的一些问题和思考的笔记. 1.vue和avalon一样,都不支持VM初始时不存在的属性 而在Angular里是可以支持的,因为angular采用脏检查的方式实现双向绑定,vue和avalon都是采用setter和getter实现双向绑定 例,如下代码在一秒后不会显示出"xxcanghai"的字样 <div id="app"> <h1>{{obj.tex

  • 关于Vue.js一些问题和思考学习笔记（2）

    关于Vue.js一些问题和思考学习笔记（2）

    前言 本文非vue教程,仅为学习vue过程中的个人理解与笔记,有说的不正确的地方欢迎指正讨论 1.computed计算属性函数中不能使用vm变量 在计算属性的函数中,不能使用Vue构造函数返回的vm变量,因为此时vm还未返回,依然处于Vue内部构造函数过程中,遂只能使用this来代替vm. 若要使用typescript,可使用以下方法来实现代码智能感知 vm = vm || this; 另:其他不能用vm变量,只能使用this变量的地方,都可以通过此方法来获得Typescript的智能感知和代码

  • Vue.js第二天学习笔记（vue-router）

    Vue.js第二天学习笔记（vue-router）

    vue中vue-router的使用: main.js如何配置(es6的写法):在引用之前记得先   npm 下所需要的vue import Vue from 'vue' import App from './App.vue' import Router from 'vue-router' import Resource from 'vue-resource' //import VueTouch from 'vue-touch' var VueTouch = require('vue-touch'

  • WebGL学习教程之Three.js学习笔记(第一篇)

    webgl介绍 WebGL是一种3D绘图协议,它把JavaScript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个JavaScript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染. WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏. 原生的WebGl比较复杂,主要通过对顶点着色器和片元着色器的操作,来实现渲染,但实现起来比较复杂,需要一定的数学基础,但更多的是需要学习

随机推荐