vue 基本语法特性

一、模板语法及数据绑定

• 模板:整个html框架就是一个模板,vue中用template来表示html。
• 语法：

//1、文本插值（使用双大括号的形式）
<div id="app">
  <p>{{ message }}</p>
</div>
//2、绑定部分HTML(不推荐)
<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>dd教程</h1>'
  }
})
</script>
//3、绑定标签的css属性（需使用v-bind命令）
<div id="app">
  <label for="r1">修改颜色</label>
  <input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
//4、绑定表单 v-model(若要提交后触发改变用lazy修饰)
<div id="app">
  <p>input 元素：</p>
  <input v-model="message" placeholder="编辑我……">
  <p>消息是: {{ message }}</p>
    
  <p>textarea 元素：</p>
  <p style="white-space: pre">{{ message2 }}</p>
  <textarea v-model="message2" placeholder="多行文本输入……"></textarea>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'noob',
    message2: 'http://www.noob.com'
  }
})
</script>

二、 条件：(展示某个标签中的内容)

//1、v-if v-else v-else-if
<div id="app">
    <div v-if="type === 'A'">
      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>
//2、v-show
<h1 v-show="ok">Hello!</h1>

三、循环：

//1、
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>

四、事件

//1、点击
<div id="app">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>
 
<script>
new Vue({
  el: '#app',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
//2、监听
<div id = "app">
 <p style = "font-size:25px;">计数器: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">点我</button>
</div>
<script type = "text/javascript">
 var vm = new Vue({
    el: '#app',
    data: {
       counter: 1
    }
 });
 vm.$watch('counter', function(newval, oldval) {
    alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!');
 });
</script>

五、组件（Component）

//1、自定义局部组件
<div id="app">
    <child></child>
</div>
 
<script>
var Child = {
  template: '<h1>自定义组件!</h1>'
}
 
// 创建根实例
new Vue({
  el: '#app',
  components: {
    // <runoob> 将只在父模板可用
    'child': Child
  }
})
</script>
//2、自定义全局组件
<div id="app">
    <noob></noob>
</div>
 
<script>
// 注册
Vue.component('noob', {
  template: '<h1>自定义组件!</h1>'
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

六、过滤

/1、局部过滤器 实例化之后注册
let app = new Vue({
　　el: '#app',
　　data () {
　　　　return {
  　　　　name: 'w3cplus.com'
　　　　}
　　},
　　// 声明一个本地的过滤器，过滤其必须在声明实例之后写
　　filters: {
　　　　Upper: function (value) {
　　　　　　return value.toUpperCase()
　　　　}，      Lower: function (value) { 　　　　　　return value.toLowerCase() 　　　 }
　　}
})
<div id="app"> <h1>{{ name | Upper }}</h1> </div>
/2、全局过滤器  实例化之前注册
<div id="app">
  <!-- 首字符串大写 -->
  <div>首字母大写过滤器：{{str | upcase}}</div>
</div>
 
<script type="text/javascript" src='https://i0.jrjimg.cn/zqt-red-1000/focus/focus2017YMZ/teamFrighting/js/vue.min.js'></script>
<script type="text/javascript">
    //全局方法 Vue.filter()注册一个自定义过滤器,必须放在Vue实例化前面
    // 注册一个首字母大写的过滤器
    Vue.filter("upcase", function(value) { 
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    });
    var demo = new Vue({
      el: "#app",
      data: {
        str:'hello',
        message:12
      }
    });
</script>