JS Vue 基础语法学习(一)

最新推荐文章于 2023-04-26 17:27:30 发布

A初

最新推荐文章于 2023-04-26 17:27:30 发布

阅读量179

点赞数

文章标签： vue javascript

本文链接：https://blog.csdn.net/weixin_45148841/article/details/107448727

版权

JS Vue.js 基础语法学习(一)

经过前面几篇的了解,我们大概知道了数据响应式的大概怎么实现了,现在我们来用vue的方法来实现数据响应式.
上代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
	
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>	

<body>
  <div  id="app">
{{name}}
  </div>
</body>
<script type="text/javascript">
  let vm =  new Vue({
        el:"#app",
        data:{
           name:"我叫小明"
           }
           })
  </script>
 </html>

写完了…是不是感觉很简单,之前的你们可以看看我之前写的: Js 数据响应式 (二)

这就是vue框架的快捷之处(其中一个),所以说Vue能火起来不是没有道理,咱们接着说今天的正题,不扯远

开始今天的干货内容:(如有表达不到位的地方,请指出)

现在开始我将开始正式接触Vue,好吧其实好几天前就开始看了,一直没机会写博客,今天比较闲,现场没什么事情,工作干完了,赶快抽时间来写,废话不多说,开始吧!
今天学习了以下内容:
1:用Vue的响应式加载我要的数据
2:双绑数据
3:只执行一次的响应式
4: 用vue的方法在标签里面插入标签
5:用v-bind:class来更改内容的样式
6:vue里的三元运算符

几个比较简单的内容,但是你要是不自己动手敲一敲代码,你下次遇到还是不知道

老规矩直接上代码:实践出真知!!!

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>响应式</title>
	  <script  src="js/jquery-3.2.1.js"></script>
  <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

</head>	

<body>
  <div  id="app">
{{name}}
<div>{{age}}</div>
<input  v-model="input_text" >{{ input_text }}
<p v-once> {{ name }}(v-once的作用就是:只能在初始化的时候更改,后面再也更改不了)</p>
<p v-html="HTML" class="class"></p>
<p v-bind:class="{_p:is_p}">内联样式</p>
<p>{{results ? YES : NO }}</p>
  </div>
</body>
<script type="text/javascript">
  let vm =  new Vue({
        el:"#app",
        data:{
          name:"我叫小明",
		  age:17,
          results:59-60>0,
          input_text:"双绑数据(输入更改)",
		  HTML:"<strong > 这是v-html里的标签,不能直接在标签中写style样式,可以在mounted生命周期钩子里,或者直接在style中写</strong> <p>这个标签里的内容没有更改</p>",
		  is_p:true,
		  YES:'及格了',
		  NO:'没有及格'
        },
		updated:function ()  {
			vm.$nextTick(function() {
				console.info("修改数据的时候触发我")
				})
		 },
		 mounted:function(){
			 	// $('.p2').find('strong').css('color', 'red');  jQuery的写法,如果你要用的话一点要在Vuejs加载之前先加载jQuery,不然会报错,其次这也是个框架,得去下源码.
		 }
    })
	timeout();
function timeout()
{
	setTimeout(function(){vm.name="改名了,我叫大明"},1000)
}

  </script>

  <style >
.class>strong{  
		 color: blue;
 /*	>的作用是获取.class下的strong,局部设置样式.这是个好习惯,不然全局会导致其它的样式也改变.*/
	  }
	  ._p{
		  color:red;
	  }
  </style>
      </html>

以上就是我这次要分享的内容,内容很简单,手上操作一下就彻底明白了. 没什么难的地方
JQuery源码地址:https://jquery.com/download/
Vue源码地址:https://cn.vuejs.org/v2/guide/installation.html
JQuery 下载后是 2个文件, 带min 的是压缩后的,效果一样,只不过是压缩过了,两个可以随时替换的.
Vue有2个版本一个是开发版,一个是生产版, 学习就用开发版,生产环境就用生产版,可以随时替换的.

今天的内容到此结束
送给自己,也送给你们一句话:越努力,越幸运,趁年轻多学点东西!