Vue简单介绍

Vue(Vue.js的简称)是前端的主流框架之一,和Angular.js、React.js一起,成为前端三大主流框架,Vue.js是一套构建用户界面的框架,只关注视图层,它不仅容易上手,还便于与第三方库或既有项目整合(Vue有配置的第三方类库,可以整合起来做大型项目的开发)。

先来说明几个概念:

框架和库的区别:

  • 框架是一套完整的解决方案,对项目侵入性大,项目如需更换框架,则需重新架构整个项目
  • 库(插件)提供一个小功能,对项目的侵入性较小,如果某个库无法完成某些需求,可以很容易的切换到其他库来满足需求

MVC和MVVM:

  • MVC(模型(model)-视图(view)-控制器(controller)),model是数据管理者,要么是数据库中存储的数据,要么是从服务器中获取的数据;view是用户在屏幕上看到的结构、布局和外观;将两者联系起来的是controller,通过controller将model里的数据放到view中,或从view中获取数据存入model。
  • MVVM(Model-View-ViewModel),model是与view界面对应的数据对象,view是用户在屏幕上看到的结构、布局和外观,ViewModel是一个绑定器,在view和model之间进行通信。
  • vue基本代码与MVVM之间的对应关系:
<body>
    
    <div id="app">
        <p>{
    {msg}}p>
    div>
    
    <script>
        //创建一个vue实例,当导入包之后,在浏览器内存就多了一个vue构造函数
        //new出来的vm对象即为MVVM的VM绑定器
        var vm = new Vue({
      
            el: '#app', //el属性表示控制的是页面上哪个区域
            //这里的data就是MVVM的M,专门用来保存每个页面的数据
            data: {
      
                msg: '欢迎学习vue'
                    //通过vue提供的指令,很方便的把数据渲染到页面上,不需要手动操作DOM元素
            }
        })
    script>
body>
  • MVC和MVVM一样,都是为了将view和model分离,但MVC需要对DOM进行操作,这样页面就有大量DOM绑定与监听类的操作;MVVM通过数据双向绑定让数据自动地双向同步,V修改数据自动同步M、M修改数据自动同步到V,无需手动操作DOM。
  • 两者详细的比较可参考https://www.jianshu.com/p/b0aab1ffad93

vue的几种指令:

  • v-cloak:解决插值表达式(即上面例子中的“{ {msg}}”)闪烁的问题。在上面的例子中,当网速很慢时,页面会出现‘{ {msg}}’闪烁而过的一瞬间,带给用户不好的体验,可用v-cloak来解决这个问题,在css样式中设置其为不可见,当加载完时,msg中的数据也能正常显示。
[v-cloak] {
     
	display:none;
}
<div id="app">
   <p v-cloak>{
    {msg}}p>
div>
  • v-text:用来渲染普通文本(即无法解析出文本中的html代码),默认v-text无闪烁问题,v-text会覆盖元素中原本的内容,但是插值表达式只会替换自己的这个占位符,不会把整个元素的内容清空。
<body>
    <div id="app">
        <p>+++{
    {msg}}---p>//插值表达式前后的内容不会被覆盖,会显示出来
        <h4 v-text="msg">======h4>//里面的======会被覆盖,不会显示出来
    div>
    
    <script>
       var vm = new Vue({
      
            el: '#app', 
            data: {
      
                msg: '欢迎学习vue'
            }
        })
    script>
body>
  • v-html:和v-text类似,不同之处在于v-html可将文本中的html代码解析出来
<body>
    <div id="app">
        <p v-cloak>{
    {msg2}}p>
        <div v-text="msg2">div>
        <div v-html="msg2">div>
    div>

    <script>
        var vm = new Vue({
      
            el: '#app',
            data: {
      
                msg: '欢迎学习vue',
                msg2: '

hello world

'
} })
script> body>

页面显示:
Vue简单介绍_第1张图片

  • v-bind:提供的用于绑定属性的指令,v-bind:可简写为“:要绑定的属性值”
<body>
    <div id="app">
        <input type="button" value="按钮" title="mytitle">
        <input type="button" value="按钮" v-bind:title="mytitle">
        <input type="button" value="按钮" :title="mytitle + '123'">
        
    div>

    <script>
        var vm = new Vue({
      
            el: '#app',
            data: {
      
                mytitle: '这是一个自己定义的title'
            }
        })
    script>
body>
  • v-on:事件绑定机制,v-on:的缩写为@
<body>
    <div id="app">
        <input type="button" value="按钮" v-on:click="show">
        <input type="button" value="按钮" v-on:mouseover="show">
        <input type="button" value="按钮" @mouseover="show">
    div>

    <script>
        var vm = new Vue({
      
            el: '#app',
            data: {
      
                mytitle: '这是一个自己定义的title'
            },
            methods: {
      
                //这个methods属性中定义了当前vue实例所有可用的方法
                show: function() {
      
                    alert("今天要好好学习呀")
                }
            }
        })
    script>
body>

跑马灯效果:


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>跑马灯效果title>
    <script src="lib/vue.js">script>
head>

<body>
    <div id="demo">
        <input type="button" value="跑起来" @click="go">
        <input type="button" value="立定" v-on:click="stop">
        <h3>{
    {mes1}}h3>
    div>
    <script>
        //在VM实例中,如果想获取data上的数据或想调用methods中的方法,必须通过this来进行访问
        var lang = new Vue({
      
            el: '#demo',
            data: {
      
                mes1: '向左转,跑步走~~!',
                intervalid: null //在data上定义定时器id
            },
            methods: {
      
                go: function() {
      
                    if (this.intervalid != null) return;
                    //此时应该用箭头函数,如果用function就会出现this指向问题,用箭头函数,this还是指向外部实例
                    this.intervalid = setInterval(() => {
      
                        //获取第一个字符
                        var start = this.mes1.substring(0, 1);
                        //获取后面所有字符
                        var end = this.mes1.substring(1);
                        //进行新的字符串连接
                        this.mes1 = end + start;
                        //注意:VM实例会监听自己身上的data所有数据改变,只要数据发生了变化,就会自动把最新数据同步到页面中去
                    }, 400)
                },
                stop: function() {
      
                    //停止定时器
                    clearInterval(this.intervalid);
                    this.intervalid = null;
                }
            }
        })
    script>
body>

html>

你可能感兴趣的:(js,vue,html)