vue知识

最新推荐文章于 2022-07-04 16:39:41 发布

kookoo_babe

最新推荐文章于 2022-07-04 16:39:41 发布

阅读量334

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43751465/article/details/106867302

版权

慕课网视频地址
 vue-cli学习
 Chrome插件vue.js devtools的安装
Vue两大核心思想：组件化和数据驱动

1、vue.js安装

2、创建第一个vue实例：

<!DOCTYPE html>
<html lang="en">
	<head>
    	<meta charset="UTF-8">
   		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<title>vue入门</title>
    	<script src='./vue.js'></script>
	</head>
	<body>
    	<div id="root">{
   {
   msg}}</div>
    	<script>
        	new Vue({
   
            	el:"#root",
            	data:{
   
                	msg:"hello world"
            	}
        	})
    	</script>
	</body>
</html>

3、挂载点、模板、实例之间的关系

挂载点指的是Vue实例里的el属性对应的dom节点 id
模板指的是挂载点内部的内容，实例里template属性的内容
实例：定义挂载点，把定义的数据与模版结合起来生成要展示的内容，再把这个内容放在挂载点中，实例就是new vue出来的

<!DOCTYPE html>
	<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>vue.js</title>
    	<script src="vue.js"></script>
	</head>
	<body>
    	<div id="root"></div>
    	<script>
            new Vue({
   
                el:"#root",
                template:"<h1>{
   {msg}}</h1>",
                data: {
   
                    msg:"hello world!",
                }
            })
        </script>
	</body>
</html>

4、vue实例中的数据，事件和方法

加载数据的方法：

1、插值表示
2、v-text:将内容进行转义
3、v-html：不会转义
4、事件： v-on:click=“handleClick” 或者 @click=“handleClick”
5、面向数据

<!DOCTYPE html>
	<html lang="en">
	<head>
    	<meta charset="UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    	<meta http-equiv="X-UA-Compatible" content="ie=edge">
    	<title>vue.js</title>
    	<script src="./vue.js"></script>
	</head>
	<body>
    	<div id="root">
        	<h1 @click="handleClick">{
   {
   msg}}</h1>
    	</div>
    	<script>
            new Vue({
   
                el:"#root",
                data: {
   
                    msg:"hello dog!",
                    number: 123
                },
                methods: {
   
                    handleClick: function() {
   
                        // alert(123)
                        this.msg = "twodoge"
                    }
                }
            })
        </script>
	</body>
</html>

5、属性绑定和双向绑定

v-bind:title = " " 实现title绑定，等号后面" " 里面可用js的表达式。
v-bind:title 可缩写成 :title。

	<div id="root">
        <div v-bind:title=" 'dear jin,' + title">hello world</div>
    </div>
    <script>
        new Vue({
   
            el: "#root",
            data: {
   
                title: 'this is hello world'
            },
            methods: {
   
            }
        })
    </script>

v-model 为vue模板数据双向绑定指令。

  	<div id="root">
        <input type="text" v-model="content" />
        <div>{
   {
   content}}</div>
    </div>
    <script>
        new Vue({
   
            el: "#root",
            data: {
   
                content: "this is content"
            },
            methods: {
   
            }
        })
    </script>

6、vue中的计算属性和监听器

计算属性写在computed中

写起来像一个方法，用起来像一个属性（本质就是一个属性）
注意点：
- 只要跟计算属性相关的数据发生了改变，计算属性就会重新计算，不相关的值发生变化，不会重新计算计算属性
- 一定要有返回值
什么时候使用计算属性
根据已知data中的值，生成一个额外的新值，且新值还要跟着data中的值变化而变化
computed里面的计算属性名不能和data中的属性名重名

监听器：通过watch监听一个属性值的变化，只要值发生了变化，就会调用watch的一些方法

	<div id="root">
        姓：<input v-model="firstName" />
        名：<input v-model="lastName" />
        <div>{
   {
   fullName}}</div>
        <div>{
   {
   count}}</div>
    </div>
    <script>
        new Vue({
   
            el: "#root",
            data: {
   
                firstName: '',
                lastName:'',
                count:0
            },
            computed: {
   
                fullName:function(){
   
                    return this.firstName + ' ' + this.lastName
                }
            },
            watch: {
   
                fullName:function(){
   
                    this.count ++
                }
            }
        })
    </script>

7、条件渲染

v-if

dom存在与否

<div id="root">
  <div v-if="show">{
   {
   msg}}</div>
  <button @click="handClick">toggle</button>
</div>
<script>
  new Vue({
   
    el:"#root",
    data:{
   
      msg:"小丸子",
      show:true
     },
     methods:{
   
       handClick:function(){
   
         this.show=!this.show;
       }
     }
  });
</script>

v-show

dom显示与否（为false时：dom中display：none）

<div v-show="show">{
   {
   msg}

最低0.47元/天解锁文章

kookoo_babe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue知识

慕课网视频地址vue-cli学习Chrome插件vue.js devtools的安装Vue两大核心思想：组件化和数据驱动1、vue.js安装2、创建第一个vue实例：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1
复制链接

扫一扫