今天开始学习Vue-Vue(1)入门案例hello,world

一、

1、导入vue.js后，使用前端代码创建一个模块。

<div id="demo">

        <p>hello,{{name}}</p>

    </div>

其中{{}}包住的js表达式就是我们Vue要传给网页的变量

2、创建一个Vue实例，并指明它所解析的模块。

<script type="text/javascript">
        Vue.config.productionTip = false;
        // 创建一个Vue实例,用于解析容器，实例于容器是一一对应的关系
        new Vue({
            // el指定那个容器
            el: '#demo',
            // data为el选择实例提供数据
            data: {
                name: 'world'
            }
        })
    </script>

注意：Vue实例与模块之间是一一对应的关系，不能多对一，或者一对多。

3、运行程序。

 可以看到当我们执行程序的时候，Vue帮助我们已经将{{name}}替换成了我们在Vue实例中所写的值了。

二、

看着我们现在电脑上的网页我们不紧思考，还有其他插入的方式吗？

上一段，我们介绍的名叫插值语法，接下来我们了解一下指令语法

  <a v-bind:href="url">点击前往百度</a>

Vue中有一些以v开头的叫做指令，放在特殊的位置可以起作用。

上面那一句话的作用与插值语法是一样的，将url替换成Vue实例里面我们设定好的值。