Vue.js简单学习记录(未完待续...)_{{ item | filter |filter(arg1,arg2)}}-CSDN博客

本文链接：https://blog.csdn.net/Aizen_Sousuke/article/details/102812488

Vue.js是构建用户界面的渐进式== JavaScript框架 == 只关心视图层，可以自底向上逐层应用。

一个简单的例子：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 </title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
	<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用于指定改动的div
			el: '#vue_det',
			//data用于定义属性
			data: {
				site: "hello",
				url: "www.baidu.com",
				alexa: "10000"
			},
			//用于定义函数，通过return返回函数值
			methods: {
				details: function() {
					return  this.site + " - 每天进步一点点！";
				}
			}
		})
	</script>
</body>
</html>

在这里插入图片描述
在上面的Vue构造函数有个== el ==参数，用来指定改动的div

el用于指定改动的div
data用于定义属性
methods用于定义函数，通过return返回函数值
{{}}用于输出对象属性和函数返回值
vm.$data表示Vue实例的属性（加前缀 $）

模板语法

{{ }}：插入文本值

<div id="app">
  <p>{{ message }}</p>
</div>

输出html代码

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

HTML 属性中的值应使用 v-bind 指令判断是否使用样式

<!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">
	//v-model用来监听input事件
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  //判断是否使用class1的样式
  <div v-bind:class="{'class1': use}">
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>
</body>

支持JavaScript表达式

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    //增加一个属性： id="list-1"
    <div v-bind:id="'list-' + id">实例测试</div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'RUNOOB',
    id : 1
  }
})
</script>

指令

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

参数

<div id="app">
	// <pre><a href="http://www.baidu.com">百度</a></pre>
    <pre><a v-bind:href="url">百度</a></pre>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.baidu.com'
  }
})
</script>

用户输入：
v-model 指令用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-on 监听按钮的事件，并对用户的输入进行响应。
过滤器：自定义过滤器，被用作一些常见的文本格式化
{{ message | filterA | filterB }}
过滤器是JavaScript函数，因此可以填参数
{{ message | filterA(‘arg1’, arg2) }}
message 是第一个参数，字符串 ‘arg1’ 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数
缩写v-bind和v-on：

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

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

条件语法

v-if：条件判断
①上面例子有
②

{{#if ok}}
  <h1>Yes</h1>
{{/if}}

v-else
v-else-if
v-show 展示元素

循环语句

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: 'baidu' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

v-for 迭代对象

<div id="app">
//第一种
  <ul>
    <li v-for="value in object">
    	{{ value }}
    </li>  
  </ul>
  //第二种
    <ul>
	    <li v-for="(value, key) in object">
	   		{{ key }} : {{ value }}
	    </li>
  	</ul>
  //第三种
  	 <ul>
	    <li v-for="(value, key, index) in object">
	     	{{ index }}. {{ key }} : {{ value }}
	    </li>
  	</ul>
  //循环整数
    <ul>
	    <li v-for="n in 10">
	     	{{ n }}
	    </li>
  	</ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '加油',
      url: 'http://www.baidu.com',
      slogan: '每天进步一点点！'
    }
  }
})
</script>

计算属性

computed vs methods效果上两个都是一样的。computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性

监听属性

watch：响应数据的变化

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 </title>
	<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
   <body>
      <div id = "computed_props">
         千米 : <input type = "text" v-model = "kilometers">
         米 : <input type = "text" v-model = "meters">
      </div>
	   <p id="info"></p>
      <script type = "text/javascript">
         var vm = new Vue({
            el: '#computed_props',
            data: {
               kilometers : 0,
               meters:0
            },
            methods: {
            },
            computed :{
            },
            watch : {
               kilometers:function(val) {
                  this.kilometers = val;
                  this.meters = this.kilometers * 1000
               },
               meters : function (val) {
                  this.kilometers = val/ 1000;
                  this.meters = val;
               }
            }
         });
         // $watch 是一个实例方法
		vm.$watch('kilometers', function (newValue, oldValue) {
			// 这个回调将在 vm.kilometers 改变后调用
		    document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
		})
      </script>
   </body>
</html>

样式绑定

v-bind:class
v-bind:style 直接设置样式

事件处理器

v-on：
几首一个定义的方法来调用

<div id="app">
   <!-- `greet` 是在下面定义的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>
 
<script>
var app = new Vue({
  el: '#app',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 对象中定义方法
  methods: {
    greet: function (event) {
      // `this` 在方法里指当前 Vue 实例
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
          alert(event.target.tagName)
      }
    }
  }
})
// 也可以用 JavaScript 直接调用方法
app.greet() // -> 'Hello Vue.js!'
</script

内联JavaScript语句

<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)
    }
  }
})
</script>

事件修饰符
按键修饰符

表单

v-model指令会根据空间类型自动选取正确的方法来更新元素

输入框

<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: 'input框',
	message2: '文本框\r\n换行'
  }
})
</script>

在这里插入图片描述

复选框

<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="baidu" value="Baidu" v-model="checkedNames">
  <label for="runoob">Baidu</label>
  <input type="checkbox" id="google" value="Google" v-model="checkedNames">
  <label for="google">Google</label>
  <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
  <label for="taobao">taobao</label>
  <br>
  <span>选择的值为: {{ checkedNames }}</span>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	checked : false,
    checkedNames: []
  }
})
</script>

在这里插入图片描述

select列表

<div id="app">
  <select v-model="selected" name="fruit">
    <option value="">选择一个网站</option>
    <option value="www.baidu.com">Baidu</option>
    <option value="www.google.com">Google</option>
  </select>
 
  <div id="output">
      选择的网站是: {{selected}}
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	selected: '' 
  }
})
</script>

在这里插入图片描述

修饰符
① .lazy 同步数据

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model.lazy="msg" >

② .number自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）

<input v-model.number="age" type="number">

③ .trim 过滤空格

组件

全局组件语法：Vue.component(tagName, options)
tagName：组件名
options：配置选项

可以用在任何新创建的Vue根（new Vue）的模板中

局部注册
var options1 = { … }
var options2 = { … }
然后在components定义

 new Vue({
  el: '#app',
  components: {
    'options1': ComponentA,
    'options2': ComponentB
  }
})

局部注册的组件在其子组件中不可用

== Prop ==类型

自定义指令

<div id="app">
    <p>页面载入时，input 元素自动获取焦点：</p>
    <input v-focus>
</div>



<script>
// 注册一个全局自定义指令 v-focus
Vue.directive('focus', {
  // 当绑定元素插入到 DOM 中。
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
// 创建根实例
new Vue({
  el: '#app'
})
</script>

//注册一个局部指令
<script>
// 创建根实例
new Vue({
  el: '#app',
  directives: {
    // 注册一个局部的自定义指令 v-focus
    focus: {
      // 指令的定义
      inserted: function (el) {
        // 聚焦元素
        el.focus()
      }
    }
  }
})
</script>