vue笔记

图纸t

于 2019-08-23 16:30:43 发布

阅读量129

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/asdfghjkl110292/article/details/100041260

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

1、

<div id="app">
  <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">    //vue语法糖，use为true就设置clss属性为class1
    v-bind:class 指令
  </div>
</div>
    
<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

2、基本操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<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>
</body>
</html>

3、v-if 条件渲染，if是该内容的话就加载该标签

<div id="app">
    <p v-if="seen">现在你看到我了</p>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

3、 v-if 这些是选择渲染，就是是否加载这个标签，v-show的话是是否显示该控件，但是其实已经加载了dom

<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>
    <h1 v-show="ok">Hello!</h1>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    type: 'C',
    ok: true
  }
})
</script>

4、v-for遍历数组数据

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
    <template v-for="site in sites">
		<li>{{site.name}}</li>
		<li>-----</li>
	</template>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

5、数据更新后立即执行

var vm = new Vue({
  el: '#example',
  data: {
    message: '123'
  }
})
vm.message = 'new message' // change data    //更改了数据，但是不会立即更改，而是异步更新
Vue.nextTick(function () {           //这是vue定义的函数，用于当数据刷新时立即执行下面的语句
  vm.$el.textContent === 'new message' // true
})

整个this会根据上下文自动绑定当前的vue实例，从而不需要全局vue

this.$nextTick(function () {
        console.log(this.$el.textContent) // => 'updated'
      })

6、computed是使用缓存的，调用时不需要括号;methods是每次都会调用，调用时需要括号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<script>Vue.config.productionTip=false</script>
</head>
<body>
 <div id="app">
  <p>原始字符串: {{ message }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>计算后反转字符串: {{ reversedMessage }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
  <p>使用方法后反转字符串: {{ reversedMessage2() }}</p>
</div>
    
<script>
var i=0;
new Vue({
  el: '#app',
  data: {
   
	message:"wobujidaoya"
	
  },
  methods:{

	reversedMessage2:function(){
		i++;
		return i+"ji";
	
	}
  },
  computed:{
	reversedMessage:function(){
		i++;
		return i + "bu"; 
	
	}
 
  }
 
})
</script>
</body>
</html>

7、监听数据的改变

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Vue 测试实例 - 菜鸟教程(runoob.com)</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;
		})
		console.log(vm.$data.kilometers);  //在vue外部这样取数据
      </script>
   </body>
</html>

8、多选

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
  <p>单个复选框：</p>
  <input type="checkbox" id="checkbox" v-model="checked">
  <label for="checkbox">{{ checked }}</label>
	
  <p>多个复选框：</p>
  <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
  <label for="runoob">Runoob</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>
</body>
</html>

图纸t

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue笔记

1、<div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="use" id="r1"> <br><br> <div v-bind:class="{'class1': use}"> //vue语法糖，us...
复制链接

扫一扫

专栏目录