Vue.js基础详解

omgdog 发布于2019-08-20 19:02 / 1167人阅读

摘要：指令带有前缀，以表示它们是提供的特殊属性。最后，我们需要为赋值世界舞王尼古拉斯赵四世界舞王尼古拉斯赵四初学就到这里了，相信你已经在脑子里确定了的原理的概念也已经非常清楚了，希望你能够在学习的道路上越走越远，最后感谢你的浏览。

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.学习 JavaScript
2.学习 Vue
3.整个牛项目

在控制台里，输入 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("")
    }
}
})

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


    {{ message }}

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

组化应用构建

组件系统是 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: "赵四" }
    ]
    }
})

1.世界舞王
2.尼古拉斯
3.赵四

Vue 初学就到这里了，相信你已经在脑子里确定了Vue的原理
model-view-viewmodel的概念也已经非常清楚了，希望你能够在学习Vue的道路上越走越远，最后感谢你的浏览。

喜欢的点个赞呗！

GPU云服务器云服务器 Vue.js vue.js 属性 vue.js自学 cdn vue.js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85059.html

Vue-router(vue路由基础详解)

摘要：你可以在创建实例的时候，在配置中给某个路由设置名称。如果没有设置名字，那么默认为。 Vue.js路由(Vue-router) 安装直接引入 vue-router下载链接https://unpkg.com/vue-router/... npm下载 npm install vue-router 如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：在你的文...

JasinYip 2019-08-21 16:26 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

khs1994 2019-08-23 18:08 评论0 收藏0
前端文档收集

摘要：系列种优化页面加载速度的方法随笔分类中个最重要的技术点常用整理网页性能管理详解离线缓存简介系列编写高性能有趣的原生数组函数数据访问性能优化方案实现的大排序算法一怪对象常用方法函数收集数组的操作面向对象和原型继承中关键词的优雅解释浅谈系列 H5系列 10种优化页面加载速度的方法随笔分类 - HTML5 HTML5中40个最重要的技术点常用meta整理网页性能管理详解 HTML5 ...

jsbintask 2019-08-21 12:05 评论0 收藏0