vue学习笔记一(起步)

vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

安装

1、前往官网下载vue.js,代码中直接使用script调用，注意下调用路径
vue.js官网下载
2、使用CDN方法

静态文件CDN（国内）：https : //cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https : //unpkg.com/vue/dist/vue.js，会保持和npm发布的最新的版本一致。
cdnjs：https : //cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

vue语法及常用属性和参数

语法格式如下：

var vm = new Vue({
  // 选项
})

el 是一个参数，它是 DOM 元素中的 id
data 用于定义属性
{{ }} 用于输出对象属性和函数返回值。

<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: "憨憨",
            url: "www.baidu.com",
            alexa: "1000"
        },
        methods: {
            details: function() {
                return  this.site + " 太容易的路，可能根本就不能带你去任何地方。";
            }
        }
    })
</script>

指令

指令是带有 v- 前缀的特殊属性。
常用的指令有：
1、v-html（双大括号语法无法渲染HTML标签，我们需要使用v-html）
2、v-text（类似双大括号语法渲染数据的另一种方式是使用v-text）
3、v-if（条件判断使用 v-if 指令）
4、v-for（v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名）
5、 v-bind （绑定属性，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href）
6、v-on（v-on我们可以在标签上面绑定事件）
7、v-mode（v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值）