vue初学习(一)—— 基础指令

初步认识vue

一、Vue特点,
Vue是不兼容ie8以及以下,因为Vue使用了不兼容ie8以及以下的es5的语法

  1. 易用,偏重于应用
  2. 灵活: 完整的生态系统
    1. 小米公司: 手机、电视、电脑、衣服、智能家居、。。。
  3. 高效
    1. vue.js的原文件很小
    2. 性能高

二、 Vue为什么性能高?

  • 应该Vue使用了 虚拟DOM 技术

三、 虚拟DOM是什么呢?

  • 使用js对象模型来模拟真实DOM节点

四、Vue是一个MVVM类型框架,M V VM

五、什么是MVC

  • MVC其实一个架构思想,指的是讲一个软件【应用】分为三个部分
    • M Model 模型 --> data 数据
    • V View 视图 --> 界面
    • C Controller 控制器 --> 处理业务逻辑
  • MVC思想来源于后端

六、什么是jsx?(后面的{{}}里面可以写js语法就是这个的体现)

  • javascript + xml
    • xml就是标签化语法
  • 在标签里面写js

基础指令

  1. 什么是指令

    • 指令其实就是一个属性
  2. 指令是用来干什么的呢?

    • 指令是使用操作DOM
  3. Vue提供了14个内置指令,供我们使用


1、双大括号语法 {{}} {{}}里面就可以写js语法了,这就是所谓的jsx

2、当我们引入vue.js之后,vue会注册一个Vue全局函数 window.Vue = functioin () {}

3、Vue是一个构造函数 =》 可以实例化

4、const vm = new Vue() ,可以这样写,也可以直接写 new Vue()就行

5、new Vue() 要有el来挂载才行,一般这个el都是元素的id,不然没法触发执行


v-bind:指令: 单向数据绑定 ,将数据赋值给属性值

 <div id="app">
    <h2> 单向数据绑定  v-bind  将数据赋值给属性值 </h2>
      <img v-bind:src="pic" alt="">
      <!-- 简写 -->
      <img :src="pic" alt="">
 new Vue({
    el: '#app',
    data: {
      pic: 'url'

v-model: 双向数据绑定,类似两边写会相互影响,绑定的是== 数据 ==!!!!这个绑定的数据就是这个input框输入的东西

  • 仅仅是应用于表单元素
    • v-model默认绑定了表单元素的value属性
    • 含义
      • 数据改变,视图也会随之改变
      • 视图改变,数据也会随之改变
 <h2> 双向数据绑定  v-model </h2>
    <div>
      <label for=""> 用户名 </label>
      <input type="text" v-model = "username">
    </div>
    <div>
      <label for=""> 密 码 </label>
      <input type="text" v-model = "password">
    </div>
	new Vue({
	    el: '#app',
	    data: {
	      username: '',
	      password: '',

这种是指在vue控制台和视图之间的可以实现双向数据交换,v-model还有其他的用法,表单中的还有其他的v-model的用法


数据展示指令: v-text v-html

	<h1> 数据展示 </h1>
	    <h3> {{}} </h3>
	    <p> {{ name }} </p>
	    <h3> v-text  </h3>
	    <p v-text = "name"></p>
	    <div v-text = "xml"></div>
	    <h3> v-html </h3>
	    <p v-html = "name"></p>
	    <div v-html = "xml"></div>

{{}} vs v-text vs v-html 区别

  • v-text 和 v-html 写法和结果是等价于 {{}}
  • {{}} 语法呢在刷新页面的时候,会出现闪现问题
  • v-text 和 v-html 是没有的
  • v-html会解析标签语法

条件渲染:v-show v-if

条件渲染实现方式

  1. 条件展示
    1. v-show
      1. 控制的是元素的 display 样式
      2. 如果初始条件为 false , 元素也会渲染,所以初始渲染开销较高,
      3. v-show的切换开销较低
  2. 条件判断 == 适用于通过一个逻辑判断来决定点击出现酱紫的==
    1. v-if v-else v-else-if
    2. 如果初始条件为 false , 元素不会渲染,渲染开销较低
    3. 条件判断的切换开销较高,因为它要不断的生成和销毁元素
	<div id="app">
	    <h2> 条件展示 v-show </h2>
	    <div class="mask" v-show = "flag"> 模态框 </div>
	    //这里的模拟块渲染了 但是没有展示的意思,所以上面说的初始条件为false元素也会渲染的意思
 new Vue({
    el: '#app',
    data: {
      flag: false

条件判断

 <h2> 条件判断 </h2>
      <h3> 单路判断 </h3>
        <p v-if = "f"> NBA - 詹姆斯 </p>
        //这时f为false时不能显示詹姆斯
        
      <h3> 双路判断 </h3>
        <h4> 女孩 选择  两个男孩中的一个 </h4>
        <p v-if = "choose"> AA </p>
        <p v-else> BB </p>
		//这时choose为true就显示AA,false就显示BB

      <h3> 多路判断 </h3>
        <input type="text" v-model = "grade">
        <p v-if = "grade >= 80"> 优秀 </p>
        <p v-else-if = "grade >= 60"> 良好 </p>
        <p v-else = "grade < 60"> 不及格 </p>
		//这里是双向数据绑定的,修改了input框里面的数值就相当于修改了data中的数值,从而达到更改判断条件的操作
	 new Vue({
	    el: '#app',
	    data: { 
	      grade: 60
	    }
	  })
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页