VUE常用语法

VUE绑定总结:

• { {}}去data里面的属性值和函数返回值
• v-bind简写:bind用来绑定style和class
• v-on简写@on用来绑定事件
• v-model用来双向绑定如input selected等标签

1-{ { }} 用于输出对象属性和函数返回值。

<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: “1234567",
                url: “www.baidu.com",
            },
            methods: {
   
                details: function() {
   
                    return  this.site;
                }
            }
        })
    </script>

2-v-text和v-html

使用v-text和v-html指令来替代{ {}},属于单项绑定
说明：
v-text：将数据输出到元素内部，如果输出的数据有HTML代码，会作为普通文本输出
v-html：将数据输出到元素内部，如果输出的数据有HTML代码，会被渲染
示例：
HTML:

<div id="app">
    v-text:<span v-text="hello"></span> <br/>
    v-html:<span v-html="<br>hello<br>"></span>
</div>

3-v-bind

属性绑定
html属性不能使用双大括号形式绑定，只能使用v-bind指令
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组

data:{
   
    Url:”www.baidu.com"
}
比如img标签里面的src属性
<img :src = “Url"/>
或者
<img v-bind:src = “Url"/>

v-bind (style绑定)

//绑定css样式
<div v-bind:style="baseStyles"></div>
//数据部分
data: {
   
    baseStyles: {
   'background-color': 'red'}
}

//如果绑定多个css样式,用数组表示
<div v-bind:style="[baseStyles,overridingStyles]"></div>
data: {
   
    baseStyles: {
   'background-color': 'red'},
    overridingStyles: {
   border: '1px solid black'}
}

//对象语法
<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
data: {
   
  activeColor: 'red',
  fontSize: 30
}

v-bind class样式绑定

<div id="app">
    <div v-bind:class="activeClass"></div>
    <div v-bind: