Vue框架入门到实践(一)

最新推荐文章于 2023-12-08 10:33:34 发布

seperinna

最新推荐文章于 2023-12-08 10:33:34 发布

阅读量116

点赞数

分类专栏：前端开发文章标签： vue

本文链接：https://blog.csdn.net/u010108076/article/details/108247937

版权

前端开发专栏收录该内容

26 篇文章 0 订阅

订阅专栏

Vue安装

在官网下vue.js文件 vue.js
打开项目，在html文件中通过script标签引入vue.js

<script type="text/javascript" src="vue.js" charset="UTF-8"></script>

Vue应用创建及运行

首先，通过Vue函数创建新的Vue实例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script type="text/javascript" src="vue.js" charset="UTF-8"></script>
 </head>
 <body>
  <div id="app">
   {{message}} {{name}} 
  </div>
  <script type="text/javascript">
   var data = {
     message:"hello vue!",
     name:"test"
   }
   var app = new Vue({
    el:"#app",
    data:data    
    });
  </script>
 </body>
</html>

可以通过Vue对象引用数据

<script type="text/javascript">
   var data = {
     message:"hello vue!",
     name:"test"
   }
   var app = new Vue({
    el:"#app",
    data:data    
    });
    data.message == app.message  //Vue对象message属性  
    app.$data   //可查看Vue对象的data数据
    app.$watch("message",function(oldValue,newValue){
 console.log(oldValue,newValue);
})     //可监控Vue对象message属性值变化
  </script>

所有Vue实例创建开始需要经过一系列初始化过程，比如设置数据监听，编译模板，将实例挂载到DOM, 并在数据变化时更新DOM等，在这些过程中会运行一些叫做生命周期钩子的函数。

<script>
	var data = {
	     message:"hello vue!",
	     name:"test"
   	}
   	var app = new Vue({
    		el:"#app",
    		data:data,
    		beforeCreate:function(){
		     console.log("beforeCreate");
		    },
		created:function(){
		     console.log("created");
		    },
		beforeMount:function(){
		     console.log("beforeMount");
		    },
		mounted:function(){
		     console.log("mounted");
		    },
	        beforeUpdate:function(){
		     console.log("beforeUpdate");
		    },
		updated:function(){
		     console.log("updated");
		    }    
	});
</script>

模板语法

//模板插值
<div id="app">{{message}}</div>   //内容会随变量数据改变而改变
<div id="app"  v-once>{{message}}</div>   //内容将一次性插值，不再会改变
<div id="app" v-html="rawhtml"></div>   //div标签下加入rawhtml对象的html文本内容
<p v-bind:class="color">test</p>   //动态绑定html标签属性
<p>{{numberr + 1}}</p>    // 支持javascript计算
<p>{{ok?"YES":"NO"}}</p>   //支持三目运算符
<p>{{1==1?"YES":"NO"}}</p>

//模板指令
<p v-if="see">根据指令判断显示该内容</p>   //根据指令显示内容
<div @click="click1">
	<div @click.stop="click2">    //.stop为修饰符，阻止点击往上冒泡
	点击
	</div>
</div>

<script type="text/javascript">
   var app = new Vue({
    el:"#app",
    data: {
    message: "hello vue!",
    rawhtml: '<p style="color:red">raw html content</p>',
    color:"red",
    number:10,
    ok: false,
    see:true，
    }，
    methods:{
    click1: function(){
    	console.log("click1..");
    },
    click2: function(){
    	console.log("click2..");
    },
    }    
    });
 </script>
 <style type="text/css">
 .red{color:red;font-size:100px;}
 </style>

seperinna

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue框架入门到实践(一)

Vue安装在官网下vue.js文件 vue.js打开项目，在html文件中通过script标签引入vue.js<script type="text/javascript" src="vue.js" charset="UTF-8"></script>Vue应用创建及运行首先，通过Vue函数创建新的Vue实例<!DOCTYPE html><html> <head> <meta charset="utf-8">
复制链接

扫一扫