Vue.js使用1-CSDN博客

本文链接：https://blog.csdn.net/qq_34884302/article/details/102858764

1.vue的基本语法

<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: "你好",
            url: "www.nihao.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + "梦想！";
            }
        }
    })
</script>

可以看到在 Vue 构造器中有一个el 参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det，在 div 元素中：

这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
接下来我们看看如何定义数据对象。
data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
methods 用于定义的函数，可以通过 return 来返回函数值。
{{ }} 用于输出对象属性和函数返回值。

2.HTML 属性中的值应使用 v-bind 指令。

以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
</head>
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>
<body>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

<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>
</body>

v-modle双重绑定在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：

v-if 判断 v-html用于输出 html 代码 v-on 指令，它用于监听 DOM 事件

<div id="app"> 
<div v-html="message"></div> 
</div> 
<script> 
new Vue({ 
el: '#app',
 data: { message: '<h1>测试案例</h1>' }
 }) 
</script>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">反转字符串</button>
	<input type="checkbox" v-model="use" id="r1">测试 //双重绑定，相互影响
	<p v-if="use" >现在你看到我了</p>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: 'Runoob!',
	  use:false
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>
</body>
</html>