第一节:VUE插值指令

发布于:2023-01-24 ⋅ 阅读:(8) ⋅ 点赞:(0) ⋅ 评论:(0)

#vueJS插值指令

框架的作用

原生DOM操作的非常平凡因此采用框架开发

​ 使用框架开发:

​ 只需要关注数据变化还是视图变化,学习VUE需要具备的知识点:

1、html + css
2、javaScript
3、DOM对象

vue框架不支持IE8及其一下的版本,

VUE的使用

VUE使用方法有两种方法,一种是直接导入vue的连接;一种使用脚手架开发,前期我们学习直接上连接,后期使用上脚手架。

vue.js 初始化

初始化需要使用vue.js 目前一般使用2.6版本

<!DOCTYPE html>
<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>Document</title>
</head>
<body>    
  	<!-- 挂载对象 -->
    <div id='app'>
      	<!-- 映射数据 -->
        <input type='text' v-model="inp">
    </div>
	<!-- 外部应用js -->  
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <!-- 初始化vue -->  
  <script>
        let vm = new Vue({
            el:'#app',// 挂载到id=app的dom上
            // data:{}, // 第一种写法
          	// data:function(){return {}},  // 第二种写法
            // 保存对应的数据内容
            // data(){ return {}}// 第三种写法
            data:{// 数据集
                inp:'这是变量inp的数据值'
            }
        })
    </script>
</body>
</html>

基本指令

{{ }} 插值符号:插值符号应用vue中data数据中的变量名

v-text 文本方式解析data键值

v-html html方式解析data键值

v-show 控制HTMl中标签是否显示

插值符号

<!DOCTYPE html>
<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>Document</title>
</head>
<body>    
    <!-- 挂载对象 -->
    <div id='app'>
       <!-- {{}} 插值符号 -->
       <h1>{{divTab}}</h1>
       <!-- v-text 插值符号 -->
       <h1 v-text="vText"></h1>
       <!-- v-html 插值符号 -->
       <h1 v-html='vHtml'></h1>
       <!-- v-show 控制该元素在页面中是否显示 -->
       <h1 v-show="vShow"></h1>
       <!-- `` 表示字符串 可换行 -->
      
      <h2 v-text=`vText`>显示原型vText</h2>
       <h2 v-text=`${vText}`>显示变量中值</h2>
    </div>
    <!-- 引入外部应用js -->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- 初始化vue -->
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                divTab:'这是插值符号 {{}} 插入的文本',
                vText:'这是插值符号 v-text 插入的文本',
                vHtml:'这是插值符号 v-html 插入的文本',
                vShow:true,
                vShowText:'当vShow:true时,当前标签显示,vShow:false时,当前标签隐藏不显示'
            }
        })
    </script>
</body>
</html>

判断指令

v-if 判断是否成立 可单独使用

v-if v-else-if 可以和if连接使用

v-else 不能单独使用

<!DOCTYPE html>
<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>Document</title>
</head>
<body>    
    <!-- 判断指令 -->
    <div id="app">
        <div v-if='islogin'>if(islogin==true)</div>
        <div v-else-if='isShow'>else if(isShow==true)</div>
        <div v-else>else</div>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el:'#app',//挂载对象
            data:function(){
                return{
                    islogin: false,
                    isShow:true,
                }
            }
        })
    </script>
</body>
</html>

v-for 循环指令

v- for 循环遍历

<!DOCTYPE html>
<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>Document</title>
</head>
<body>    
    <!-- 判断指令 -->
    <div id="app">
        <ul>
            <li v-for='item in arr'>{{item}}</li>
            <li v-for='(items,index) in arr'>{{index}}{{items}}</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <script>
        new Vue({
            el:'#app',//挂载对象
            data:function(){
                return{
                    arr:['冰淇淋','珍珠奶茶','拿铁','柠檬水']
                }
            }
        })
    </script>
</body>
</html>