苏飞论坛

标题: [Vue.js]学习笔记—Vue.js入门 [打印本页]
作者: Amy    时间: 2019-1-17 17:47
标题: [Vue.js]学习笔记—Vue.js入门
[Vue.js]学习笔记—Vue.js入门
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
[HTML] 纯文本查看 复制代码
<html>

<head>

<title>My first Vue app</title>

</head>

<body>

<div id="app">

{{ message }}

</div>

<script src="js/vue.min.js"></script>

<script>

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

</script>

</body>

</html>


除了文本插值，我们还可以像这样来绑定元素特性：
[HTML] 纯文本查看 复制代码
<html>

<head>

  <title>My first Vue app</title>

</head>

<body>

  <div id="app-2">

    <span v-bind:title="message">

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

  </span>

  </div>

  <script src="js/vue.min.js"></script>

  <script>

    var app2 = new Vue({

      el: '#app-2',

      data: {

        message: '页面加载于 ' + new Date().toLocaleString()

      }

    })

  </script>

</body>

</html>

效果：
(, 下载次数: 165)