lession1
1.Vue的了解  
渐进式框架   作者：尤雨溪     mvvm
2.创建vue实例
引入<script src="vue.js"><script>
<body>
    <div id="myApp">
   
    </div>
</body>
<script>
    new Vue({
        el:"#myApp",// 挂载
        data:{// 是你的数据状态。
            str:""
        }
    })
</script>
 
3.基础指令  directive
    vue对元素属性的扩展    以v-开头
v-model   可以将你的表单元素    与 你的数据进行绑定  
               修饰符： 该指令的属性
                number： 将所绑定的元素的值设定为 number  
                trim： 去除空格
                lazy：当失去焦点的时候，才会与你的数据产生响应
v-if  值是一个布尔，用于是否渲染
v-else-if    v-else   v-if    
 
 
v-for  遍历数据( 字符串，数字，对象，数组)
v-bind    将你的数据与你的元素属性进行绑定   简写 ：
v-show   用于隐藏或显示
 
 
v-on 绑定事件   简写
v-once  用于初始值
v-pre   跳过该区域
 
{{}}:输出数据，写表达式。
 
附：js的一种取反操作：
        const str = "中华人民共和国";
     console.log(str.split("").reverse().join(""))
 
事件实例：
<script src="vue.js"><script>
<body>
<div id="myApp">
    <!--方法后面的括号 要不要加 ，可以加-->
    <input type="button" v-on:click="changeIsShow" value="显示与隐藏">
    <input type="button" @click="changeIsShow" value="@显示与隐藏">
    <div v-show="isShow">
        我在马路边捡到一分钱，所它交给警察叔叔手里面。
    </div>
</div>
</body>
<script>
    new Vue({
        el:"#myApp",
        // 存放你的状态。
        data:{
            isShow:true
        },
        // 将你的函数方法写在这里
        methods:{
            // 方法
            changeIsShow(){
                this.isShow = !this.isShow;
                // console.log(this.isShow);
            }
        }
    })
</script>
 
 
 
 
 
重点面试相关问题：
 
1.mvvm和mvc的区别
    mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View 。
2.vue中为什么自定义组件data定义成一个函数？
   主要是防止组件与组件之间，声明的变量互相影响，他们是互相独立的，互补干扰
   组件复用时所有组件实例都会共享 data，如果 data 是对象的话，就会造成一个组件修改 data 以后会影响到其他所有组件，所以需要将 data 写成函数，每次用到就调用一次函数获得新的数据。
 

0807 创建vue实例以及vue的基础指令的更多相关文章

  1. 浅谈 vue实例 和 vue组件

    vue实例: import Vue from 'vue'; import app from './app'; import myRouter from './routers'; new Vue({ e ...

  2. vue基础——vue实例

    创建一个vue实例 每个vue应用都是通过Vue函数创建一个新的Vue实例开始的 var vm = new Vue({ //选项 }) 一个Vue应用由一个通过new Vue创建的根Vue实例,以及可 ...

  3. Vue.js官方文档学习笔记(三)创建Vue实例

    创建Vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm=new Vue({ //选项 }) Vue的设计受到了mvvm的启发 当创建一个 Vue 实 ...

  4. 创建一个vue实例

    创建一个vue实例 每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 MVVM 模型,但是 Vue ...

  5. 01慕课网《vue.js2.5入门》——基础知识

    前端框架 Vue.js2.5 2018-05-12 Vue官网:https://cn.vuejs.org/ 基础语法+案例实践+TodoList+Vue-cli构建工具+TodoList Vue基础语 ...

  6. Vue实例与模板语法

    VUE基础使用方法 一.安装 1.NPM 在用 Vue 构建大型应用时推荐使用 NPM 安装[1].NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用.同时 Vue ...

  7. vue实例详解

    Vue实例的构造函数 每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的 虽然没有完全遵循 MVVM 模式, Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 ...

  8. 前端框架之Vue(1)-第一个Vue实例

    vue官方文档 知识储备 es6语法补充 let 使用 var 声明的变量的作用域是全局. { var a = 1; } console.info(a); 例1: var arr = []; for ...

  9. Vue实例和生命周期

    创建一个Vue实例 每个Vue应用都是通过Vue函数创建一个新的Vue实例开始: var vm = new Vue({ //选项 }) 数据与方法 当一个Vue实例被创建时,它向Vue的响应式系统中加 ...

随机推荐

  1. WMI_COM_API

    Win32_Processor // CPU 处理器 Win32_PhysicalMemory // 物理内存 Win32_Keyboard // 键盘 Win32_PointingDevice // ...

  2. 个人永久性免费-Excel催化剂功能第47波-VBA开发者喜爱的加密函数类

    VBA的确是个很不错的编程工具,寄生在OFFICE内,无需安装庞大的开发环境,即开即用,方便灵活,能实现的事情也很多,但毕竟VBA是微软停止更新维护将近20年的一种语言,计算机的世界发展速度有多快大家 ...

  3. Excel催化剂开源第19波-一些虽简单但不知道时还是很难受的知识点

    通常许多的知识都是在知与不知之间,不一定非要很深奥,特别是Excel这样的应用工具层面,明明已经摆在那里,你不知道时,永远地不知道,知道了,简单学习下就已经实现出最终的功能效果. 在程序猿世界里,也是 ...

  4. 洛谷 P1101-题解

    这道题可以用深搜(回溯)来写,相信大部分人都是这么想的,但是有些人可能在一些地方饶了半天,所以这里就贴一下我的思路,个人觉得自己的很好懂,除了tx和ty那里,但是tx和ty的那种用法对于输出路径的题目 ...

  5. 为 Editor.md 编辑器插件增加预览和发布按钮

    前言 一直在使用 Editor.md 插件作为博客的编辑器,用着挺好,但是在全屏下编辑时,每次想预览或者保存又必须切换到非全屏状态下才可以点击按钮,用着不舒服,所以花了一点时间在工具栏上增加了预览.保 ...

  6. linux初学者-文件的归档和传输

      1.文件归档 因为linux系统都是以文件的形式存在,所以在处理文件时有时候因为文件太多导致传输速度慢等问题,为了提高方便并且提高效率,常把文件归档,文件归档就是把多个文件变成一个归档文件. 文件 ...

  7. 研究分布式唯一ID生成，看完这篇就够

    很多大的互联网公司数据量很大,都采用分库分表,那么分库后就需要统一的唯一ID进行存储.这个ID可以是数字递增的,也可以是UUID类型的. 如果是递增的话,那么拆分了数据库后,可以按照id的hash,均 ...

  8. Linux学习(一)--VMware下Linux安装和配置

    本片随便将给大家讲述linux在VM虚拟机上安装及终端的安装和配置 一.Linux介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线 ...

  9. 逆向MFC程序

    目录 @ 1 MFC执行流程 1.1 环境支持 1.2 分析 1.3 实践探索 1.3.1 创建一个MFC程序 1.3.2 下关键断点并调试 1.4 转向MFC库源文件中观测 2 逆向 2.1 特征码 ...

  10. 如何在jsp中显示数据库的内容

    用Eclipse tomcat新建一个JSP页面(一)介绍了如何创建一个web程序和第一个jsp页面,以及Eclipse需要的一些必要配置.今天,我们重点说一下如何从数据库中查询数据,并且在JSP页面 ...