前端高级技术框架Vue从入门安装到常见指令

前端高级技术

前端一款是有频率很高的框架

原生js中的dom操作太繁琐

所以我们使用了vue框架可以免除原生js中的dom操作简化书写

基于MVVM思想

实现了数据的双向绑定把编程的关注点放在数据上

框架是一个半成品软件是一套可重用的通用的软件基础代码模型

基于框架进行开发更加快捷更加高效

配置

参考文档

Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org)

下载网站

安装 — Vue.js (vuejs.org)

创建文件夹专门放入js文件

在js文件夹中放入vue.js--->

特性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
          <!--绑定 数据模型 message 数据模型中的内容会直接展示出来-->
          <input type="text" v-model="message">
          <!--通过一个表达式 代表我们要让数据模型直接展示出来-->
          {
  {message}}
    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      data:{
        message:"Hello Vue"
      }
   })
</script>
</html>

我们可以

直接将数据模型中的数据展示出来

因为我们使用了v-model这个指令

改变输入框内的数值后面的展示数值也会变化

因为他们绑定的是同一个数据模型

因为vue的双向绑定性

视图层的数据变化改变数据模型数据模型变化又会改变视图层的数据展示

常用指令

常用指令1

为html标签绑定属性值

或者是建立双向数据的绑定

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
      
          <!--创建一个表单 把输入的数据绑定到数据模型上-->
          <input type="text" v-model="url" >

          <!--定义一个超链接的标签-->
          <!--两种书写方式 第二种方式比较简洁-->
          <a v-bind:href="url">访问</a>
          <a :href="url">访问</a>
    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
          url:"http://www.baidu.com"
      }
   })
</script>
</html>

通过v-model 和 v-bind绑定的变量

必须在数据模型中声明

常用指令2

为html标签绑定事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
        <!--定义一个按钮 代表一个单击事件-->
        <input type="button" value="点我" v-on:click="handle()">
        <input type="button" value="点我" @click="handle()">
    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
          url:"http://www.baidu.com"
      },
      methods:{
        handle:function(){
          alert("为什么点我");
        }
      }
   })

</script>
</html>

两种方式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
        
      <!--让 vue 接管-->
      年龄 <input type="text" v-model="age">经判定 ,为:
      <span v-if="age<=35">年轻人 (35 岁及以下) </span>
      <span v-else-if="age>35&&age<60">中年人 (35-60)</span>
      <span v-else="age>=60">老年人 (60 及以上)</span>

      <br><br>


    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
         age:20
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
        
      <!--让 vue 接管-->
      年龄 <input type="text" v-model="age">经判定 ,为:
      
      <span v-show="age<=35">年轻人 (35 岁及以下) </span>
      <span v-show="age>35&&age<60">中年人 (35-60)</span>
      <span v-show="age>=60">老年人 (60 及以上)</span>

      <br><br>


    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
         age:20
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

展示的效果一样

区别

v-show渲染的是三个标签而v-if渲染的是选择到的标签

v-show渲染三个标签只不过

是用css里的display属性赋值none来让未满足条件的标签不显示

常用指令4

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
     <div v-for="addr in addrs">{
  {addr}}</div>


    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
         addrs:["北京","上海","西安","成都","深圳"]
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

类似于javase中的lambda表达式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!--引入 vue 的标签-->
  <script src="js/vue.js"></script>
</head>
<body>

  <!--编写 视图层 的展示-->
    <div id="app"><!--代表现在 vue 接管的对象就是 id 是 app 的 div 标签里的-->
     <div v-for="(addr ,index) in addrs">{
  {index}} : {
  {addr}}</div>


    </div>

</body>
<script>
    //定义 vue 对象
   new Vue({
      el:"#app",//vue 接管 的区域
      //定义数据模型
      data:{
         addrs:["北京","上海","西安","成都","深圳"]
      },
      //定义函数
      methods:{
        
      }
   })

</script>
</html>

展示