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

末蓝、 2022-12-19 06:17 98阅读 0赞

### Vue.js ###

*  Vue.js
 *   *  Vue.js是什么
     *  Vue基础语法
     *   *  插值表达式\{ \{\}\}
         *  安装Vue
         *  实例化Vue
     *  指令
     *   *  v-text
         *  v-html
         *  v-cloak
         *  v-bind
         *  v-on
 *  利用Vue指令制作简单跑马灯
 *   *  其他指令

# 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>

效果如下：  
![在这里插入图片描述][20201105205547140.png_pic_center]  
我们可以看出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>

![在这里插入图片描述][20201105212313262.png_pic_center]

### v-cloak ###

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

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

<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>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]

### 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>

![在这里插入图片描述][20201105215035958.png_pic_center]

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

**第一步：创建Vue实例**

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

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

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指令][Vue]

[20201105205547140.png_pic_center]: /images/20221120/c5cf6c6086e14b0e9b6b21f22c366be6.png
[20201105212313262.png_pic_center]: https://img-blog.csdnimg.cn/20201105212313262.png#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201105214635368.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70#pic_center
[20201105215035958.png_pic_center]: https://img-blog.csdnimg.cn/20201105215035958.png#pic_center
[Vue]: https://blog.csdn.net/PILIpilipala/article/details/109581902