Vue基础语法

{{插值表达式}}

1.这种{{}}语法就是插值表达式,可以写任何合法的表达式.

 

2.v-text属性语法叫做指令,可以绑定属性值

3.在vue中所有的指令,都是属性,Vue的指令,都是以v-开头

 

 const vm = new Vue({

            el: '#app', //指定当前要创建的这个VM实例,要控制页面哪个区域的元素,

            //此处el属性指定的元素,就是我们MVVM中的视图层.

            data: { //data是一个对象,表示我们要渲染的一些数据,此处的data属性就是

                //MVVM中中的V视图层

                msg: '这是使用Vue渲染的数据哦,我们并没有操作DOM元素',

                msg2: true

            }

        })

 

1.使用插值表达式存在闪烁问题,但是v-text没有此问题

2.插值表达式中可以使用v-cloak解决闪烁问题 

3.插值表达式只会插入内容,并不会清除其余内容 

 <!-- v-text会把标签中间内容覆盖掉 -->

        <h3 v-text=msg>12365</h3>   12365不现实这里,只显示msg的值

 

v-text和v-html的区别就是 v-html可以识别标签.  

<div v-text=msg2></div>

        <!-- v-html可以识别标签 -->

      <div v-html=msg2></div>

 

 

v-bind:可以绑定一些数据  

简写可以只写：引号就可以

<!-- v-bind:指令中,如果想要实现表达式的拼接,被拼接的字符串,一定要用引号包起来 -->

比如: <input type="button" value="按钮" v-bind:title="btnTitle" :id="customldName+'这是追加的内容'">

 

v-on指令是绑定事件

@是v-on:的简写形式

methods: {

          //方法的意思 s代表可以设置很多方法,可以定义很多时间处理函数

          add: function () {

            this.weight++;

          },

          jian(...args) {

            //不管传几个参数，都会以数组形式保存起来

            //对象中,定义函数属性的简写形式

            console.log(args); //[1,2,3] 以数组形式把实参保存起来

            //在methods中，如果访问data中的值，那么只能通过this.***访问

            //注意：在data中的数据变化之后，会被VM调度者监听到，然后自动把最新的数据应用到也页面上

            this.weight--;

          },

        },

 

 

1.v-bind只能实现单向绑定

2. v-model可以实现双向绑定 

3.注意:v-model只能应用在表单元素中

4.v-model可以渲染到表单内容 

5.表单元素 input text radio checkbox textarea select