vue简单入门介绍part1

最新推荐文章于 2023-10-16 12:32:14 发布

Aldom

最新推荐文章于 2023-10-16 12:32:14 发布

阅读量256

点赞数

分类专栏： front 文章标签： vue

本文链接：https://blog.csdn.net/MichaelJY1991/article/details/89670126

版权

front 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

vue

vue简单来说是一款开源的Javascript前端框架，可以快速开发响应式前端，简化了web前端开发。

特征

虚拟DOM（Virtual DOM）

vue使用虚拟DOM（React、Ember等前端框架也采用），它不会修改原有的DOM，而是复制一份DOM作为虚拟DOM。
每次改变都会比较真实DOM和虚拟DOM，发生变化才会应用到真实DOM。

数据绑定（Data Binding）

数据绑定可以指定值到HTML的属性，比如改变style,class等，在vue中用v-bind进行数据绑定。

组件（Components）

组件是vue重要的特征之一，它可以创建自定义元素（可在HTML中重用）。

事件处理（Event Handing）

通过v-on可以为DOM元素添加监听事件。

动画（Animation/Transition）

vue提供多种方法在HTML元素新增、修改或移除时有过渡动画。

计算的属性（Computed Properties）

这是vue重要特征之一，可以监听UI的变化，并且执行必要的计算。

模板（Templates）

vue提供模板用来绑定DOM和vue实例数据，vue将模板编译成虚拟DOM的渲染函数。

指令（Directives）

vue内置了v-if、v-else、v-show、v-on、v-bind、v-model等函数，可以将改变应用至前端（类似于jstl）。

监听器（Watchers）

监听器用于应用数据改变。比如，对于input元素，数据发生变化，我们不必提交额外的事件。监听器会处理
这些数据变化，让编码更简单、更快。

路由（Routing）

vue-router用于页面间导航。

轻量级（Light Weight）

vue是轻量的、高性能的前端框架。

构建工具（Vue-Cli）

vue-cli用于构建和编译vue项目。

使用

script

<html>
   <head>
      <script type = "text/javascript" src = "vue.min.js"></script>
   </head>
   <body></body>
</html>

NPM

# 安装vue
npm install vue
npm install --global vue-cli

# 初始项目
vue init webpack myProject

# 编译&运行
npm install
npm run dev

实例

语法

var app = new Vue({
   // options
})

# html
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "vue_det">
         <h1>Firstname : {{firstname}}</h1>
         <h1>Lastname : {{lastname}}</h1>
         <h1>{{mydetails()}}</h1>
      </div>
      <script type = "text/javascript" src = "js/vue_instance.js"></script>
   </body>
</html>

# vue
var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : "Ria",
      lastname  : "Singh",
      address    : "Mumbai"
   },
   methods: {
      mydetails : function() {
         return "I am "+this.firstname +" "+ this.lastname;
      }
   }
})

数据

<html>
  <head>
     <title>VueJs Introduction</title>
     <script type = "text/javascript" src = "js/vue.js"></script>
  </head>
  <body>
     <script type = "text/javascript">
        var _obj = { fname: "Raj", lname: "Singh"}
        
        // direct instance creation
        var vm = new Vue({
           data: _obj
        });
        console.log(vm.fname);
        console.log(vm.$data);
        console.log(vm.$data.fname);
     </script>
  </body>
</html>

组件

var Comp = Vue.extend({
   props: ['msg'],
   template: '<div>{{ msg }}</div>'
})
var vm = new Comp({
   propsData: {
      msg: 'hello'
   }
})

计算

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 2 },
            computed: {
            
               // get only, just need a function
               aSum: function () {
                  return this.a + 2;
               },
               
               // both get and set
               aSquare: {
                  get: function () {
                     return this.a*this.a;
                  },
                  set: function (v) {
                     this.a = v*2;
                  }
               }
            }
         })
         console.log(vm.aSquare);  // -> 4
         vm.aSquare = 3;
         console.log(vm.a);       // -> 6
         console.log(vm.aSum); // -> 8
      </script>
   </body>
</html>

方法

<html>
   <head>
      <title>VueJs Introduction</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <script type = "text/javascript">
         var vm = new Vue({
            data: { a: 5 },
            methods: {
               asquare: function () {
                  this.a *= this.a;
               }
            }
         })
         vm.asquare();
         console.log(vm.a); // 25
      </script>
   </body>
</html>

监视器

v-model & watch

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "computed_props">
         Kilometers : <input type = "text" v-model = "kilometers">
         Meters : <input type = "text" v-model = "meters">
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = val * 1000;
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
      </script>
   </body>
</html>

绑定

v-bind:

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <style>
         .info {
            color: #00529B;
            background-color: #BDE5F8;
         }
         div {
            margin: 10px 0;
            padding: 12px;
         }
         .active {
            color: #4F8A10;
            background-color: #DFF2BF;
         }
         .displayError{
            color: #D8000C;
            background-color: #FFBABA;
         }
      </style>
      <div id = "classbinding">
         <div class = "info"  v-bind:class = "{ active: isActive, 'displayError': hasError }">
            {{title}}
         </div>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#classbinding',
            data: {
               title : "This is class binding example",
               isActive : false,
               hasError : false
            }
         });
      </script>
   </body>
</html>

# binding ex 2
<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <h3>Radio</h3>
         <input type = "radio" id = "black" value = "Black" v-model = "picked">Black
         <input type = "radio" id = "white" value = "White" v-model = "picked">White
         <h3>Radio element clicked : {{picked}} </h3>
         <hr/>
         <h3>Select</h3>
         <select v-model = "languages">
            <option disabled value = "">Please select one</option>
            <option>Java</option>
            <option>Javascript</option>
            <option>Php</option>
            <option>C</option>
            <option>C++</option>
         </select>
         <h3>Languages Selected is : {{ languages }}</h3>
         <hr/>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               picked : 'White',
               languages : "Java"
            }
         });
      </script>
   </body>
</html>

事件

<button v-on:click.once = "buttonclicked">Click Once</button>

<a href = "http://www.google.com" v-on:click.prevent = "clickme">Click Me</a>

<input type = "text"  v-on:keyup.enter = "showinputvalue"/>

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
   </head>
   <body>
      <div id = "databinding">
         <button v-on:click = "displaynumbers">Click ME</button>
         <h2> Add Number 100 + 200 = {{total}}</h2>
      </div>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#databinding',
            data: {
               num1: 100,
               num2 : 200,
               total : ''
            },
            methods : {
               displaynumbers : function(event) {
                  console.log(event);
                  return this.total =  this.num1+ this.num2;
               }
            },
         });
      </script>
   </body>
</html>

渲染

v-if
v-else
v-show
v-for

动画

<transition name = "nameoftransition">
   <div></div>
</transition>

<transition  v-on:before-enter = "beforeEnter"
    v-on:enter = "enter"
    v-on:leave = "leave"
    v-bind:css = "false">
    <p v-if = "show" style = "font-size:25px;">Animation Example with velocity</p>
</transition>

指令

Vue.directive('nameofthedirective', {
   bind(e1, binding, vnode) {
   }
})

路由

<html>
   <head>
      <title>VueJs Instance</title>
      <script type = "text/javascript" src = "js/vue.js"></script>
      <script type = "text/javascript" src = "js/vue-router.js"></script>
   </head>
   <body>
      <div id = "app">
         <h1>Routing Example</h1>
         <p>
            <router-link to = "/route1">Router Link 1</router-link>
            <router-link to = "/route2">Router Link 2</router-link>
         </p>
         <!-- route outlet -->
         <!-- component matched by the route will render here -->
         <router-view></router-view>
      </div>
      <script type = "text/javascript">
         const Route1 = { template: '<div style = "border-radius:20px;background-color:cyan;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 1</div>' }
         const Route2 = { template: '<div style = "border-radius:20px;background-color:green;width:200px;height:50px;margin:10px;font-size:25px;padding:10px;">This is router 2</div>' }
         const routes = [
            { path: '/route1', component: Route1 },
            { path: '/route2', component: Route2 }
         ];
         const router = new VueRouter({
            routes // short for `routes: routes`
         });
         var vm = new Vue({
            el: '#app',
            router
         });
      </script>
   </body>
</html>

Aldom

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单入门介绍part1

vuevue简单来说是一款开源的Javascript前端框架，可以快速开发响应式前端，简化了web前端开发。特征虚拟DOM（Virtual DOM）vue使用虚拟DOM（React、Ember等前端框架也采用），它不会修改原有的DOM，而是复制一份DOM作为虚拟DOM。每次改变都会比较真实DOM和虚拟DOM，发生变化才会应用到真实DOM。数据绑定（Data Binding）...
复制链接

扫一扫