Vue.js基础介绍及部分指令 (一)

Vue.js

Vue.js是什么

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是：

1. Vue 被设计为可以自底向上逐层应用。
2. Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
3. 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

Vue基础语法

插值表达式{{}}

主要作用是进行数据绑定
最常见的形式是使用“Mustache”语法（双大括号）的文本插值。
例如：<p>{{msg}}</p>Mustache标签将会被替代为对应数据对象上msg属性（**msg定义在data对象中）**的值。
无论何时，绑定的数据对象上msg属性发生了改变，插值处的内容都会更新。

安装Vue

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

实例化Vue

<div id="app"></div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{
         },
         methods: { 
         },
     })
</script>

new 出来的这个vm对象 就是我们MVVM中的 VM调度者

• el：表示当前我们new的这个vue实例, 需要控制页面上的哪个区域
• data：就是MVVM中的M 专门用来保存每个页面的数据
• methods ：定义了当前vue实例所有可用的方法

指令

v-text

**更新元素的 textContent。**如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。
通俗来讲，v-text指令会直接替换标签之间的内容

v-text 类似于js中 innerText

<div id="app">
	<p v-text='msg'>这是一个p2标签</p>
	<p>这是一个p1标签</p>
</div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{
         	msg:'欢迎学习Vue',
         },
         methods: { 
         },
     })
</script>

效果如下：

我们可以看出v-text属性直接将“这是一个p2标签”替换成vue实例中的msg

v-html

更新元素的 innerHTML。

<div id="app">
	hello pikaqiu
</div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{
         	html:'<h1>v-html指令的应用</h1>',
         },
         methods: { 
         },
     })
</script>

v-cloak

**这个指令保持在元素上直到关联实例结束编译。**和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

如果浏览器速度过慢或者是网络延迟，浏览器页面上只会出现{{}}
v-cloak指令就是为了解决这个问题

<style>
   [v-cloak]{
       display: none;
   }
</style>

<div id="app">
	<p v-cloak>{{msg}}</p>
</div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{
         	msg:'欢迎学习Vue',
         },
         methods: { 
         },
     })
</script>

v-bind

缩写：:
用法：

• 动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
• 在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。
• 在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。
• 没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

v-bind指令的应用: 是用来绑定属性的指令

示例：

<div id="app">
	   <a href="http://www.baidu.com">跳转到百度</a>
       <br>
       <a v-bind:href="baidu">跳转到百度</a>
       <br>
       <a :href="baidu">跳转到百度</a>
       <input type="button" value="按钮"  :title="mytitle+'123'" >
</div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{
         	baidu:'http://www.baidu.com',
         	mytitle:'这是一个自定义的title'
         },
         methods: { 
         },
     })
</script>

v-on

缩写：@
用法：

• 绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
• 用在普通元素上时，只能监听原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的自定义事件。

示例：

<div id="app">
       <input type="button" value="提交" v-on:click="show">
       <input type="button" value="提交" @click="show">
</div>
<script>
     var vm=new  Vue({
         el:'#app'
         data:{

         },
         methods: { 
             show:function(){
                 alert('Hello Vue指令v-on');
             },
     })
</script>

利用Vue指令制作简单跑马灯

第一步：创建Vue实例

<div id="app">

</div>
<script>
     // 创建vue实例
     var vm= new Vue({
         el:'#app',
         data:{
             msg:'一起吃炸鸡，喝啤酒吧~~~~~!',
         },
         methods: {
             
         },

     })
 </script>

第二步：写页面内容并绑定指令

<div id="app">
    <input type="button" value="吃吃吃" @click='eat'>
    <input type="button" value="嗨嗨嗨" @click='happy'>
    <span>{{msg}}</span>
</div>

eat()和happy()是两个事件函数

第三步：设置定时器，定义函数内容
思想：点击‘吃吃吃’按钮，跑马灯运行起来，点击‘嗨嗨嗨’按钮，跑马灯立即停止，提取停止时的‘跑’过的字符，运用字符串拼接的方式将两部分拼接起来

完整代码：

<div id="app">
    <input type="button" value="吃吃吃" @click='eat'>
    <input type="button" value="嗨嗨嗨" @click='happy'>
    <span>{{msg}}</span>
</div>
<script>
    // 创建vue实例
    var vm= new Vue({
        el:'#app',
        data:{
            msg:'一起吃炸鸡，喝啤酒吧~~~~~!',
            intervalId:null
        },
        methods: {
            lang(){
                // console.log(this.msg);
                if (this.intervalId!=null) {
                    return
                }
                this.intervalId=setInterval(()=>{
                    var start=this.msg.substring(0,1);
                    console.log(start);
                    var end=this.msg.substring(1)
                    console.log(end);
                    // 重新 拼接得到新的字符串, 并赋值给  this.msg
                    this.msg=end+start;
                    
                    // 起吃炸鸡，喝啤酒吧~~~~~!一
                    // 吃炸鸡，喝啤酒吧~~~~~!一起

                },400)
            },
            stop(){
                clearInterval(this.intervalId);
                this.intervalId=null;
            }
        },
    })
</script>

效果
起吃炸鸡，喝啤酒吧~~~~~!一
吃炸鸡，喝啤酒吧~~~~~!一起

其他指令

Vue指令