以最快的速度学习vue,只挑重点。

Vue构造函数简单格式：

<div id="vue_det">
    <h1>name: {{name}}</h1>
    <h1>age: {{age}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: '#vue_det',
        data: {
            name: "李志云",
            age: "20",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.name+ "-贼帅！";
            }
        }
    })
</script>

模板语法：

1.文本对象，就如上面的 “ <h1>name: {{name}}</h1> ” 直接在data中定义即可。

2.HTML对象，使用 ”v-html“ 指令操作html元素，如下：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>我要你的哎</h1>'
  }
})
</script>

3.HTML 属性 的值应使用 “v-bind” 指令，如下：

</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">//勾选时改变下面div的背景颜色
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

4.完全js表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">菜鸟教程</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

5. 指令（指令是带有 v- 前缀的特殊属性，例如常用的v-if， v-on，v-bind，v-show等等），

<div id="app">
//这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

6.双向绑定（ input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定）

<div id="app">
    <p>{{ message }}</p>//内容会随下面文本框的输入而改变
    <input v-model="message">
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  }
})
</script>

7.过滤器，被用作一些常见的文本格式化。由"管道符"指示

<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

　　　过滤器可以串联：{{ message | filterA | filterB }}  可以接受参数：{{ message | filterA('arg1', arg2) }}

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

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

<!-- 完整语法 -->
<a v-on:click="doSomething"></a>
<!-- 缩写 -->
<a @click="doSomething"></a>

语句模块

条件判断“v-if”,完整的如下：

<div id="app">
    <div v-if="type === 'A'">//多对if else，单个写法就不说了
      A
    </div>
    <div v-else-if="type === 'B'">
      B
    </div>
    <div v-else-if="type === 'C'">
      C
    </div>
    <div v-else>
      Not A/B/C
    </div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C'
  }
})
</script>

循环语句 v-for

//循环列表
<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>
//循环对象
<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '李志云',
      url: 'http://www.baidu.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>
--也可以根据属性索引和key来获取
<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>


//循环整数
<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

　　

 

posted @ 2019-11-27 15:03  请叫我靓仔  阅读(424)  评论(0)    收藏  举报