Vue基础知识

凸头用海飞丝
46 阅读2分钟

Vue概念

  • 更少的时间，干更多的活，开发网站的速度快
  • vue开发更加的效率和简洁，易于维护，快快快，现在很多的项目都是用vue开发的
  • Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架

声明式渲染---组件系统---路由---vuex

什么是库和框架

库：封装的属性和方法（jquery） 框架：拥有自己的规则和元素，比库强大的多（vue.js）

vue的学习

传统的开发模式：

基于html/css/js文件开发vue

工程化的开发方式

webpack环境中开发vue，最推荐，企业常用的方式

插值表达式

目的：在dom标签中，直接插入内容 声明式渲染/文本插值

  <div id="app">
      <!-- 插值表达式中不能写循环语法，不能写条件语句 -->
      <p>{{num}}</p>
      <p>{{num+1}}</p>
      <p>{{34}}</p>
      <p>{{flag}}</p>
      <p>{{flag?'hello':"nihao"}}</p>
      <p>{{str}}</p>
      <p>{{str +"vue是必须要学会的"}}</p>
      <p>{{'hello world'}}</p>
      <p>{{arr}}</p>
      <p>{{arr.reverse()}}</p>
      <p>{{obj}}</p>
      <p>{{obj.name}}</p>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        num: 3,
        flag: false,
        str: '大家一定要好好学习vue',
        arr: [11, 22, 333, 44],
        obj: {
          name: 'zs',
          age: 12,
        },
      },
    })
  </script>

MVVM

  • M：model数据模型（data中定义）
  • V:view视图（html页面）
  • VM:ViewModel视图模型（vue.js源码）
  • MVVM通过数据双向绑定让数据自动双向同步，不再需要操作DOM
  • V（修改视图）--->M（数据自动同步）
  • M（修改数据）--->V（视图自动同步）

Vue指令

指令 (Directives) 是带有 v- 前缀的特殊 attribute

每个指令，都有独立的作用

v-bind

给标签属性设置变量的值

语法: v-bind:属性名="vue变量"

简写： :属性名="vue变量"

  <body>
    <div id="app">
      <!-- v-bind  属性绑定：   把vue变量的值，赋予给dom属性上，影响标签的显示效果 -->
      <a v-bind:href="url">我是a标记</a>
      <a :href="url">我是a标记</a>
​
      <hr />
      <img v-bind:src="imgurl" alt="" />
      <img :src="imgurl" alt="" />
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        url: 'http://www.baidu.com',
        imgurl: 'https://img01.yzcdn.cn/vant/ipad.jpeg',
      },
    })
  </script>
v-on

给标签绑定事件

语法：

  • v-on:事件名="要执行的少量代码"
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"
  • 简写：@事件名="methods中的函数"
<body>
    <div id="app">
      <!--  v-on 事件绑定 -->
      <p>要购买的商品的数量{{count}}</p>
      <button v-on:click="count=count+1">增加1</button>
      <button v-on:click="addFn">增加1</button>
      <button v-on:click="addCount(5)">一次增5</button>
​
      <button @click="subFn">减1</button>
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        count: 2,
      },
      methods: {
        //专门用来定义函数（方法）的
        addFn() {
          //this代表的是当前的vue实例对象
          console.log(this)
          this.count++
        },
        addCount(num) {
          this.count += num //
        },
        subFn() {
          this.count--
        },
      },
    })
  </script>
v-text/v-html

更新DOM对象的einnerText和innerHTML

语法:

  • v-text="vue数据变量"
  • v-html=“vue数据变量"
<body>
    <div id="app">
      <p>{{str1}}</p>
      <p>{{str2}}</p>
      <hr />
      <p v-text="str1"></p>
      <p v-text="str2"></p>
      <hr />
      <p v-html="str1"></p>
      <p v-html="str2"></p>
      <!--  v-text把值当做普通字符串显示 
      
            v-html 把值当做html解析
      -->
    </div>
  </body>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        str1: '<span>我是一个span标签</span>',
        str2: 'hello',
      },
      methods: {},
    })
  </script>

\

avatar
文章
阅读
粉丝