Vue实例与模板语法

VUE基础使用方法

一、安装

1、NPM

• 在用 Vue 构建大型应用时推荐使用 NPM 安装[1]。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件。

  # 最新稳定版
  $ npm install vue

2、CDN

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

3、将vue.js下载到当前项目，并通过<script>标签引入，Vue 会被注册为一个全局变量。

二、vue.js介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

三、Vue实例

1、创建一个Vue实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：

var vm = new Vue({
  // 选项
})

一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。

2、数据与方法

//2.实例化对象
new Vue({
    el:'#app', //绑定标签
    data:{
        //数据属性，在vue的根组件中，data对应的可以是一个对象，也可以是一个方法，但是在其他组件中只能是一个方法，并且返回一个实例对象
        msg:'黄瓜',
        person:{
            name:'wusir'
        },
        msg2:'hello Vue'
    }
});

3、实例生命周期钩子

• beforeCreate

• created 组件创建完成，可以发起ajax（XMLHttpRequest 简称XHR axios fetch $.ajax()）请求,实现数据驱动视图

• beforeMount

• mounted DOM挂载完成

• beforeUpdate 获取原始DOM

• updated 获取更新之后的DOM

• beforeDestory 组件销毁之前

• destoryed 组件销毁之后

• activated 激活当前组件 vue提供的内置组件<keep-alive></keep-alive>

• deactivated 停用当前组件

直接上详细代码

 let Test = {
        data() {
            return {
                msg: 'alex',
                count:0,
                timer:null
            }
        },
        template: `
               <div id="test">
                    <div id="box">{{ msg }}</div>
                    <p>{{ count }}</p>
                    <button @click = 'change'>修改</button>
               </div>
            `,
        methods: {
            change() {
                this.msg = 'wusir';
                //querySelector为通用的标签选择器
                document.querySelector('#box').style.color = 'red';
            }
        },
        beforeCreate() {
​
            // 组件创建之前,取不到data中的数据
            console.log('组件创建之前', this.msg);
​
        },
        created() {
//                ********最重要
            // 组件创建之后
           this.timer = setInterval(()=>{
               this.count++
           },1000);
​
            // 使用该组件，就会触发以上的钩子函数，
            // created中可以操作数据，发送ajax，并且可以实现数据驱动视图
            // 应用：发送ajax请求
            console.log('组件创建之后', this.msg);
​
        },
        beforeMount() {
​
            // 装载数据到DOM之前会调用,此时DOM还没有被渲染,mount为挂载的意思
​
            console.log(document.getElementById('app'));
​
​
        },
        mounted() {
//            *******很重要*****
​
            // 这个地方可以操作DOM,挂载子组件之后,DOM已经渲染完毕
​
            // 装载数据到DOM之后会调用 可以获取到真实存在的DOM元素，vue操作以后的DOM
​
            console.log(document.getElementById('app'));
            //jsDOM操作
​
        },
        beforeUpdate() {
​
            // 在更新之前，调用此钩子，应用：获取原始的DOM,只有在内容发生更新或者改变时才会调用此方法
​
            console.log(document.getElementById('app').innerHTML);
​
        },
        updated() {
​
            // 在更新之后，调用此钩子，应用：获取最新的DOM
​
            console.log(document.getElementById('app').innerHTML);
​
        },
        beforeDestroy() {
            //组件在销毁之前调用,勇v-if控制组件的创建和销毁
            console.log('beforeDestroy');
​
        },
        destroyed() {
            //注意： 定时器的销毁 要在此方法中处理
            console.log('destroyed',this.timer);
            clearInterval(this.timer);
​
        },
        activated(){
​
            //与缓存有关
            console.log('组件被激活了');
        },
​
        deactivated(){
            console.log('组件被停用了');
        }
    };
    let App = {
        data() {
            return {
                isShow:true
            }
        },
        //将子组件放在keep-alive标签中,当v-if=True时,组件被激活,当v-if=False时,组件被停用,但该组件保存在缓存中,
        //能保留住缓存之前的状态,激活与停用此时调用activated方法和deactivated方法
        template: `
               <div>
                   <keep-alive>
                     <Test  v-if="isShow"/>
                  </keep-alive>
                    <button @click = 'clickHandler'>改变test组件的生死</button>
               </div>
            `,
        methods:{
          clickHandler(){
              this.isShow = !this.isShow;  //取反
          }
        },
        components: {
            Test
        }
​
    }
    new Vue({
        el: '#app',
        data() {
            return {}
        },
        components: {
            App
        }
​
    })
​

四、模板语法

1、文本{{ 双大括号}}

<div id="app">
  <p>{{ message }}</p>
</div>

2、HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>好好学习，天天向上</h1>'
  }
})
</script>

3、属性

HTML 属性中的值应使用 v-bind 指令。以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1">
  <br><br>
  <div v-bind:class="{'class1': class1}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      class1: false
  }
});
</script>

4、表达式

Vue.js 都提供了完全的 JavaScript 表达式支持。

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">python</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

5、指令

指令 (Directives) 是带有 v- 前缀的特殊特性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

5.1、参数

参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app">
    <pre><a v-bind:href="url">百度一下</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<a v-on:click="doSomething">

在这里参数是监听的事件名。

5.2修饰符

修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit"></form>

6、双向数据绑定（v-model）

在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '请输入用户名：'
  }
})
</script>
​

你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

6.1修饰符

.lazy .number .trim

7、过滤器

Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：

<!-- 在两个大括号中 -->
{{ message | capitalize }}
​
<!-- 在 v-bind 指令中 -->
<div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

7.1 局部过滤器

以下实例对输入的字符串第一个字母转为大写：

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，message 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

7.2 全局过滤器

    <div id="app">
        <App />
    </div>
    <script src="vue.js"></script>
    <script src="moment.js"></script>
    <script>
        //Vue声明的过滤器为单数,为全局过滤器,第一个参数为过滤器的名字,第二个参数为过滤器要处理的逻辑代码
        //全局过滤器可以在页面的任意位置使用
        Vue.filter('myTime',function (val,formatStr) {
            return moment(val).format(formatStr)
        })
        let App = {
            data(){
                return {
                    msg:"hello world",
                    time:new Date()
                }
            },
            template:`
​
               <div>我是一个APP  {{ msg | myReverse }}
                <h2>{{ time | myTime('YYYY-MM-DD')}}</h2>
​
               </div>
            `,
        }
        new Vue({
            el:'#app',
            data(){
                return {
​
                }
            },
            components:{
                App
            }
​
        })
​
    </script>
​

8、缩写

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>