首页 > 代码库 > Vue-学习。

Vue-学习。

2024-10-23 00:33:39   209人阅读

---恢复内容开始---

　Vue.js 与 Angular.js 非常相似，只要学过了Angular.js然后在学Vue.js就非常的简单。

什么是Vue?

相比Angularjs和ReactJS，Vue.js一直以轻量级，易上手被称道。MVVM的开发模式也使前端从原先的DOM操作中解放出来，我们不再需要在维护视图和数据的统一上花大量的时间，只需要关注于data的变化，代码变得更加容易维护。

1. 引入Vue.js

安装Vue可以通过查看官方安装教程来了解其他安装 Vue 的选项。但对webpack Node.js等打包构建工具不了解的同学不推荐直接使用vue-cli搭建项目脚手架。
最简单的方式是在本地创建的 .html 文件中通过如下方式引入 Vue：

<script src="https://unpkg.com/vue/dist/vue.js"></script>

 

2. Hello World

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM

2.1文本插值实现数据绑定

Vue.js有多种数据绑定的语法，最基础的形式是文本插值，使用mustache语法，在运行时{{ message }}会被数据对象的message属性替换，所以页面上会输出"Hello World!"。

<div id="app">
  {{ message }}
</div>
//这是定义视图View
 new Vue({
     el: ‘#app‘, //指向view 将Vue实例挂载
     data: {
       message: ‘Hello World!‘;
      } //指向model
 })
// 用来连接 View 与 Model

 

2.2 输出纯HTML

使用{{message}}的mustache语法只能将数据解释为纯文本，为了输出HTML，可以使用v-html指令:

<div id = "app">
    <div v-html="text"></div>
</div>
new Vue({
     el: ‘#app‘, 
     data: {
       text:‘<h1>hello</h1>‘
      } 
 })

 

关于指令：

Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性，将指令绑定在元素上时，指令会为绑定的目标元素添加一些特殊的行为，我们可以将指令看作特殊的HTML特性（attribute）。

2.3双向数据绑定

MVVM模式本身支持双向绑定，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

<div id="app">
    <p>{{ message }}</p>
    <input type="text" v-model="message"/>
</div>

 

这样无论是改变输入框的内容还是通过控制台修改message的值，另一个值都会同时被改变。

技术分享
2.3 给元素的属性绑定数据

定义在Vue实例的data接口上的数据的绑定很灵活，既可以绑定在DOM节点内部，也可以绑在属性上

 <div id="app" v-bind:title=‘message‘ v-bind:style=‘color‘ v-once>
     <a :href=‘url‘>{{message}}</a>
  </div>

 

v-once指令能够让你执行一次性的插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定。

var vm = new Vue({
  el: ‘#app‘,
  data:{
    message: ‘Google‘,
    color: ‘color:green‘,
    url:‘https://google.com‘
  }
})

 

Mustache 不能在 HTML 属性中使用，绑定数据到节点属性上时，需要使用v-bind指令。利用这个指令将元素节点div的 title属性和 Vue 实例的 message属性绑定到一起，从而建立数据与该属性值的绑定。v-bind指令可以缩写为一个冒号，如a标签中的v-bind:href="http://www.mamicode.com/url"的缩写方式:href="http://www.mamicode.com/url"。

<button v-bind:disabled="someDynamicCondition">Button</button>

 

v-bind指令对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除。

3.条件与循环

3.1 根据条件表达式的值来执行元素的插入或者删除行为的是v-if指令：　　
<div id="app">
  <h1 v-if="num > 0">Num: {{ num }}</h1>
  <p v-if="seen">now you see me</p>
</div>
var app = new Vue({
  el: ‘#app‘,
  data: {
    num:12,
    seen: true,
    name:‘WannaCry‘
  }
})

 

v-if指令可以绑定一个属性值为布尔型的属性，当值为真时，元素将显示，反之则消失。如果在控制台设置app.seen = false，你会发现页面上的“now you see me ”消失了。

这个例子演示了我们不仅可以绑定 DOM 文本到数据，也可以绑定 DOM 结构到数据。而且，Vue 也提供一个强大的过渡效果系统，可以在 Vue 插入/更新/删除元素时自动应用过渡效果。

3.2 v-show也是条件渲染指令，和v-if指令不同的是，使用v-show指令的元素始终会被渲染到HTML，它只是简单地为元素设置CSS的style属性。
<h1 v-show="name.indexOf(‘Walker‘) >= 0">Name: {{ name }}</h1>

在控制台打开，可以看到<h1>Name:WannaCry</h1>元素被设置了style="display:none"样式。

3.3 可以用v-else指令为v-if添加一个“else块”。
<div id="app">
   <h1 v-if="age >= 25">Age: {{ age }}</h1>
   <h1 v-else>Name: {{ name }}</h1>
</div>

 

  • v-else元素必须立即跟在v-if或v-else-if元素的后面——否则它不能被识别。
var vm = new Vue({
        el: ‘#app‘,
        data: {
           age:20,
           name: ‘Alan Walker‘,
           sex: ‘Man‘
       }
})

 

  • v-else元素是否渲染在HTML中，取决于前面v-if的值true还是false。
    如果v-if的值为false，则后面v-else的内容不会渲染到HTML。
3.4 数组数据循环渲染列表使用v-for指令：
<div class="title">
    <ul>
       <li v-for="todo in todos">
        {{ todo.text }}
       </li>
   </ul>
 </div>

 

  • v-for指令基于一个数组渲染一个列表，它和JavaScript的遍历语法相似：
    v-for="todo in todos"
    todos是一个数组，todo是当前被遍历的数组元素。
var app = new Vue({
   el: ‘.title‘,
    data: {
      //定义todos数组
      todos: [
        { text: ‘study hard‘ },
        { text: ‘find a girlfriend‘ },
         { text: ‘around the world‘ }
      ]
   }
})

 

页面显示如下：

  • study hard
  • find a girlfriend
  • around the world

控制台里，输入 app.todos.push({ text: ‘coding‘ })，你会发现列表中新添加了一项。

4. 处理用户点击

当用户点击页面，我们可以用 v-on指令绑定一个事件监听器，通过它调用我们在Vue 实例中定义的方法：

<div class="title">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">反转消息</button>
</div>

v-on指令用于给监听DOM事件，它的用语法和v-bind是类似的。

new Vue({
   el: ‘.title‘,
   data: {
       message: ‘Hello Vue.js!‘
      },
    methods: {
       reverseMessage: function () {
         this.message = this.message.split(‘‘).reverse().join(‘‘)
         //split()用于将字符串转化为数组
         //reverse()用于颠倒数组中元素顺序
         //join()用于将数组转化为字符串
      }
    }
 })
　　v-on指令可以缩写为@符号。

 

---恢复内容结束---

Vue-学习。


联系
我们