vue基础

最新推荐文章于 2024-03-20 00:46:22 发布

苘迷

最新推荐文章于 2024-03-20 00:46:22 发布

阅读量239

点赞数

分类专栏：前端文章标签：前端 vue

原文链接：https://www.mk2048.com/blog/blog.php?id=hb0jcabhc2ab&title=vue%E5%9F%BA%E7%A1%80

版权

前端专栏收录该内容

734 篇文章

订阅专栏

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

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

JS:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为app，在 div 元素中：

HTML:

<div id="app">
  {{ message }}
</div>

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。

接下来我们看看如何定义数据对象。

data 用于定义属性，实例中有三个属性分别为：site、url、alexa。

methods 用于定义的函数，可以通过 return 来返回函数值。

{{ }} 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。

实例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My first Vue</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})
</script>
</body>
</html>

<div id="vue_det">
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            site: "vue",
            url: "www.vue.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site   " - 优秀的框架！";
            }
        }
    })
</script>