vue.js

vue介绍

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

vue是一款简单的mvvm（model-view-viewmodel）框架。

vue起步

vue的引入与javascript其他库的引入相同，通过一对闭合的script标签包裹

声明式渲染

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


    
     {
   {msg}}

var data={    msg:"世界舞王，尼古拉斯-赵四"}// model-模型  数据

var box = new Vue({    el:"#box",    data:data   })// viewmodel视图模型 用来将数据渲染到模板上// 用new Vue 创建一个 Vue 对象// el：接选择器 类选择器，id选择器等都可以

世界舞王，尼古拉斯-赵四

现在我们就运用声明式渲染生成了我们第一个Vue应用。

除了给文本赋值，我们还可以利用Vue绑定DOM元素属性


        
             鼠标悬停几秒钟查看此处动态绑定的提示信息！

var box = new Vue({    el:"#box",    data: {        msg: '页面加载于' + new Date().toLocaleString()        }  })

鼠标悬停几秒钟查看此处动态绑定的提示信息！

这里我们遇到点新东西。你看到的 v-bind 属性被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊属性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。简言之，这里该指令的作用是：“将这个元素节点的 title 属性和 Vue 实例的 msg 属性保持一致”。

再次打开浏览器的 JavaScript 控制台输入 box.msg = '新消息'，就会再一次看到这个绑定了 title 属性的 HTML 已经进行了更新。

Vue更多的学习指令和组件。

条件与循环

Vue控制一个DOM元素的显示和隐藏也很简单，只需运用指令v-if就可以了


        
     显示模式

new Vue({    el: '#box',    data: {        seen: true    }})

显示模式

当我们将data数据里的seen更改为false时，我们会发现元素已经隐藏。

如果们需要将数据渲染到一个项目列表中，那么我们就需要使用到v-for指令


        
             
                  {
   { todo.text }}

new Vue({    el: '#box',        data: {            todos: [            { text: '学习 JavaScript' },            { text: '学习 Vue' },            { text: '整个牛项目' }            ]    }})

1.学习 JavaScript2.学习 Vue3.整个牛项目

在控制台里，输入 box.todos.push({ text: '新项目' })，你会发现列表中添加了一个新项。

处理用户事件

v-on可以绑定一个事件监听器。


        
     {
   { message }}

new Vue({    el: '#box',    data: {        message: 'Hello Vue.js!'    },    methods: {        reverseMessage: function () {            this.message = this.message.split('').reverse().join('')    }}})

Image text

v-model可以实现模板和数据之间的双向绑定，我们既可以通过改变数据改变值，还可以通过改变模板内的值改变数据


        
     {
   { message }}

new Vue({    el: '#box',    data: {        message: 'Hello Vue!'    }})

Image text

组化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

首先我们需要注册一个组件

Vue.component('EXPle', {    template: '这是个待办项
'})

然后我们需要为组件创建一个模板

我们可以用上面刚刚学到的v-for来为几个不同的标签防止不同的值

所以组件我们应当这样

Vue.component('todo-item', {  // todo-item 组件现在接受一个  // "prop"，类似于一个自定义属性  // 这个属性名为 todo。  props: ['todo'],  template: '{
   { todo.text }}
'})

我们还要运用v-bind将指令穿如不同的值，所以html应当这样修改

最后，我们需要为box赋值

var app7 = new Vue({    el: '#box',    data: {    groceryList: [    { id: 0, text: '世界舞王' },    { id: 1, text: '尼古拉斯' },    { id: 2, text: '赵四' }    ]    }})