1.引入vue.js写在<script></script>内

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

2.模版写在挂载点内，vue实例内

3.数据、事件、方法

{{ }}插值表达式

v-text="" 输出转译的标签 <h1>hello</h1>

v-html=""输出未转译的标签 hello

给标签绑定事件 事件监听 用于监听DOM事件 v-on 简写符号是@

点击事件  v-on:click="handleclick函数"     一般用@click

函数在methods方法中定义

在vue里对数据改变 可以不改变dom 改变实例的数据

点击函数改变   页面也改变this.content = ""

v-text , v-html 类似于{{}}

v- 可以简写为 @，v-click 就是 @click

在vue里面改变data数据定义的内容。

当data数据内容改变时，vue会自动刷新绑定的标签，不需要操作document标签。

面向数据去编程。

示例：this.content = "world" 则直接改变了data里面定义的content的值。

vue语法：

v-on:click  表示添加点击事件。

v-on:click="handleClick" 表示添加点击事件绑定handleClick方法

在vue的methods:{} 对象里面添加对应的方法即可调用

v-on:click 可以简写成 @click

vue语法：

插值表达式-方法一：{{numxxx}}

插值表达式-方法2：使用 v-text="numxxx"

插值表达式-方法3：使用 v-html="numxxx"

v-text 与 v-html 的区别：

v-text不会转义。

v-html会转义内容。

 插值表达式

v-text 不会转义

v-html 会转义

v-on:click click标签

v-on:简写为@

methods

1、插值表达式： {{number}}  ，即把number的值插入到该位置；

2、"v-on:" : 事件绑定，可简写为@，后跟事件和方法名，如v-on:click="方法名" 等同于 @click="方法名"；

3、vue不面向dom编程，而是面向数据编程；

4、v-text输出为纯文本，浏览器不会再对其进行html标签解析；v-html会被浏览器进行html标签解析后输出。   如v-text=“msg”时，数据展示为<h1>Hello World!</h1>,

     为v-html="msg"时，展示为 Hello World!

<div id="root">

<div v-text="msg"> </div>

</div>

<script>

  new Vue({

     el: "#root",

     msg: "<h1>Hello World!</h1>"

})

</script>

面向数据编程 

v-on:可用@符号代替

v-text="number" =>

v-html="number"

(模板指令，text不会进行转译，而html会）

标签绑定事件

v-on:click="handleclick"=>绑定一个click事件   handleclick为函数

在methods 输入 handleclick: function(){

                               alert(123)

                           }

           }

}

可直接改变数据

绑定事件  v-on:     ，触发的方法和vue实例的methods对应

v-on:    简写   @  （省略了v-on:）

在vue里面要改变数据的显示，不需要改变dom，只需要改变数据就行了。当数据发生变化时候，vue会自动更新dom

1. 在data中配置任意数据名

• {{number}}：插值表达式

• v-text：是一个指令，他的内容可以调用{{number}}的变量

• v-on：click 是点击事件指令，点击事件必须定义在methods事件下，简写的方法是@click

   2. methods：事件需要放在这个方法里面

插值表达式：

v-text指令：

v-html指令：

v-text和v-html的区别：

v-html不会将输出内容进行转义，而v-text会。

v-on：绑定事件

绑定事件的简写：

v-on:click——>@click

<div id="root">

            <div @click="handleClick">{{content}}<div/>

        </div>

        <script>

            new Vue({

                el: "#root",

                data: {

                    content: "hello",

                    number:123

                },

                methods:{

                    handleClick:function(){

                        this.content = "world"

                    }

                }

            })

        </script>

{{ }} 双括号包裹变量，称之为 插值表达式；

v-text  原样输出数据值；

v-html 会进行html 转换输出数据值；

当你要改变html页面上的元素时，原生DOM操作要去改变DOM，而Vue只需要你改变数据就行了，这就是两者之间的差别。

v-text:如果定义内容里包含<h1>这种html元素，他会进行转译
v-html:不会转译

1. 实例中的数据：将数据显示在模板上

   1.1：{{插值表达式}}

   1.2：v-text指令：后面跟显示内容（会将标签内容转义）

   1.3：v-html指令：后面跟显示内容（不会将标签内容转义）

   
   

2. 事件：v-on:事件类型，在Vue实例里面的methods里面写事件处理函数

   【注意：v-on:可以简写为@】

3. 方法：

   在Vue实例里面的methods属性里面写事件处理方法的函数

   
   

{{msg}}插值表达式

(a)=>{b}箭头函数(a参数，b返回值）

<div id="root">
    <div v-text="content"></div>
    <div v-html="content"></div>    //v-html不会转义
    <div v-on:click="handleClick"</div>    //绑定点击事件
    <div @click="handleClick"</div>    //v-on简写为@
</div>

<script>
    //创建Vue实例
    new Vue()({
        el:"#root",    //element绑定DOM节点
        data:{
            content:"<h1>hello</h1>"
        },
        method:{
            handleClick:function(){
                this.content = "world"    //点击更改数据
            }
        }
    })
</script>

v-on:click

v-on:可以缩写为@，进行数据绑定

插值表达式{{ }}

v-text="msg"  展示文本

v-html="msg"  展示html

给标签绑定事件：v-on:click="函数"；

v-on:可简写为@

vue实例中methods：{

     函数 

} 

*VUE语法规则：

冒号是对象数据定义写法，冒号前是属性名，冒号后是属性值。等号是赋值运算符

对于某些不需要新增属性名的操作，如数据绑定，直接用等号对应上变量名或者内容即可。

• 插值表达式

{{number}}：插值表达式，也就是把number的值插入到h1之中；

• v-text

v-text="number"：h1的内容由number这个变量决定，v-text是Vue中的一个指令，这个指令里面的东西跟着的是一个变量，它告诉h1显示的内容就是"number"这个变量，对应赋值的内容会转义为纯文本；

• v-html

v-html="c ontent"：v-html与v-text的区别是，v-html不会转义，对应内容会直接展示为HTML语法；

• v-on

v-on:click="handleClick"：通过v-on给元素绑定一个Click事件，事件触发方法。

例子中元素是div，事件是他的Click，通过v-on绑定了handleClick的方法，就会直接执行在methods里的对应function。

this.content会直接对应到vue实例自己的data中的content内容。

@click=v-on：click

click绑定事件 方法写在vue中methods

写完一个data或者el后边加上，

this.content可以直接修改content值

插值表达式：{{...}}

<div id="root">
    <h1>{{number}}</h1>
</div>
<script>
    new Vue({
        el:"root"
        data:{
            number:123
        }
    })
</script>

v-text和v-html的区别：

v-html不会转译，v-text会进行一次转译。

结果：<h1>hello</h1>

结果：hello

给div标签绑定事件（v-on）：

"v-on:"的简写是@

<div id="root">
    <div v-on:click="handleClick">{{content}}</div>
</div>
<script>
    new Vue({
        el:"#root",
        data:{
            content:"hello"
        },
        methods:{
            handleClick:function(){
                this.content="world"
            }
        }
    })
</script>

v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写：

<!-- 完整语法 -->

<a v-bind:href="url"></a>

<!-- 缩写 -->

<a :href="url"></a>

v-on 缩写

<!-- 完整语法 -->

<a v-on:click="doSomething"></a>

<!-- 缩写 -->

<a @click="doSomething"></a>