vue

2019.4.28 vue

1.index.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue入门</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<input v-model="content"/>
		<div @click="handleClick"><div class="markdown-body">
		<h2 id="element-ui固定表头">element-ui固定表头</h2>

<table>
  <tbody>
    <tr>
      <td>2019.4.28</td>
      <td><a href="/archive#element-ui">element-ui</a></td>
    </tr>
  </tbody>
</table>

<p><strong>更新列表：</strong></p>

<p><strong>参考文章：</strong></p>

<ul>
  <li><a href="https://element.eleme.cn/#/zh-CN/component/table">Table 表格</a></li>
</ul>


		<h2>相关阅读</h2>
		<ul class="posts">
			
				<li><span>2024.9.19</span> &raquo; <a href="/2024/09/19/2018-12-24-@Controller%E5%92%8C@RestController%E7%9A%84%E5%8C%BA%E5%88%AB.html"></a></li>
			
				<li><span>2021.3.2</span> &raquo; <a href="/java/2021/03/02/%E5%B8%B8%E7%94%A8%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81.html">常用测试代码</a></li>
			
				<li><span>2019.7.25</span> &raquo; <a href="/java/2019/07/25/Java%E5%B8%B8%E7%94%A8%E7%B1%BB%E5%BA%93.html">Java常用类库</a></li>
			
		</ul>
		<p>
			<!-- 多说评论框 start -->
			<div class="ds-thread" data-thread-key="element-ui固定表头" data-title="农东辉" data-url="/element-ui/2019/04/28/element-ui%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4.html"></div>
			<!-- 多说评论框 end -->
			<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
			<script type="text/javascript">
			var duoshuoQuery = {short_name:"nongdonghui"};
			(function() {
			var ds = document.createElement('script');
			ds.type = 'text/javascript';ds.async = true;
			ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
			ds.charset = 'UTF-8';
			(document.getElementsByTagName('head')[0]
			|| document.getElementsByTagName('body')[0]).appendChild(ds);
			})();
			</script>
			<!-- 多说公共JS代码 end -->
		</p>
</div></div>
		<input v-model="firstName">
		<input v-model="lastName">
		<div></div>
		<div>8</div>
		<div v-if="show">show if</div>
		<div v-show="show">show show</div>
		<button @click="toggleClick">toggle</button>
		<ul>
			<li v-for="(item,index) of list" :key="index"></li>
		</ul>
	</div>

	<script>
	var v = new Vue({
		 el: "#root",
		 data: {
			content: "this is content",
			firstName: "fn",
			lastName: "ln",
			count: 0,
			show: true,
			list: [1,2,3,4,5]
		 },
         // beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed
		 created: function () {
			// `this` points to the v instance
			console.log('created: count is: ' + this.count)
		 },
		 computed: {
			fullName: function() {
				return this.firstName + "--" + this.lastName;
			}
		 },
		 watch: {
			fullName: function() {
				return this.count++;
			}
		 },
		 methods: {
			handleClick: function() {
				this.content = "nin hao , shi jie";
			},
			toggleClick: function() {
				this.show = !this.show;
			}
		 }
	});

	Vue.component("todo-item",{
		template: "<li>abcd</li>"
	});
	</script>

	<!-- 
	1.以下代码没有效果
	<div id="root" @click="handleClick"><div class="markdown-body">
		<h2 id="element-ui固定表头">element-ui固定表头</h2>

<table>
  <tbody>
    <tr>
      <td>2019.4.28</td>
      <td><a href="/archive#element-ui">element-ui</a></td>
    </tr>
  </tbody>
</table>

<p><strong>更新列表：</strong></p>

<p><strong>参考文章：</strong></p>

<ul>
  <li><a href="https://element.eleme.cn/#/zh-CN/component/table">Table 表格</a></li>
</ul>


		<h2>相关阅读</h2>
		<ul class="posts">
			
				<li><span>2024.9.19</span> &raquo; <a href="/2024/09/19/2018-12-24-@Controller%E5%92%8C@RestController%E7%9A%84%E5%8C%BA%E5%88%AB.html"></a></li>
			
				<li><span>2021.3.2</span> &raquo; <a href="/java/2021/03/02/%E5%B8%B8%E7%94%A8%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81.html">常用测试代码</a></li>
			
				<li><span>2019.7.25</span> &raquo; <a href="/java/2019/07/25/Java%E5%B8%B8%E7%94%A8%E7%B1%BB%E5%BA%93.html">Java常用类库</a></li>
			
		</ul>
		<p>
			<!-- 多说评论框 start -->
			<div class="ds-thread" data-thread-key="element-ui固定表头" data-title="农东辉" data-url="/element-ui/2019/04/28/element-ui%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4.html"></div>
			<!-- 多说评论框 end -->
			<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
			<script type="text/javascript">
			var duoshuoQuery = {short_name:"nongdonghui"};
			(function() {
			var ds = document.createElement('script');
			ds.type = 'text/javascript';ds.async = true;
			ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
			ds.charset = 'UTF-8';
			(document.getElementsByTagName('head')[0]
			|| document.getElementsByTagName('body')[0]).appendChild(ds);
			})();
			</script>
			<!-- 多说公共JS代码 end -->
		</p>
</div></div>
	<input v-model="content" />
	
	<script>
		var my_vue = new Vue({
			el: "#root",
			data: {
				content: "this is a content"
			},
			methods: {
				handleClick: function(){
					this.content = "您好，世界！";
				}
			}
		});
	</script>

	2.methods,不是method

	3.v-if会删除和新建元素，v-show会设置元素的display属性

	4.组件其实就是指页面上的某一部分

	5.在Vue中，组件就是实例，实例就是组件,组件之间是可以互相通信的
	-->
</body>
</html>

2.TodoList.html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>VUE入门-TotoList的增删功能</title>
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		<div>
			<input v-model="inputValue">
			<button @click="handleSubmit">提交</button>
		</div>
		<ul>
			<todo-item v-for="(item,index) of list"
				:key="index"
				:content="item"
				:index="index"
				@delete="handleDelete"
			>				
			</todo-item>
		</ul>
	</div>
	<script>
		Vue.component("todo-item", {
			props: ["content", "index"],
			template: "<li @click='handleClick'><div class="markdown-body">
		<h2 id="element-ui固定表头">element-ui固定表头</h2>

<table>
  <tbody>
    <tr>
      <td>2019.4.28</td>
      <td><a href="/archive#element-ui">element-ui</a></td>
    </tr>
  </tbody>
</table>

<p><strong>更新列表：</strong></p>

<p><strong>参考文章：</strong></p>

<ul>
  <li><a href="https://element.eleme.cn/#/zh-CN/component/table">Table 表格</a></li>
</ul>


		<h2>相关阅读</h2>
		<ul class="posts">
			
				<li><span>2024.9.19</span> &raquo; <a href="/2024/09/19/2018-12-24-@Controller%E5%92%8C@RestController%E7%9A%84%E5%8C%BA%E5%88%AB.html"></a></li>
			
				<li><span>2021.3.2</span> &raquo; <a href="/java/2021/03/02/%E5%B8%B8%E7%94%A8%E6%B5%8B%E8%AF%95%E4%BB%A3%E7%A0%81.html">常用测试代码</a></li>
			
				<li><span>2019.7.25</span> &raquo; <a href="/java/2019/07/25/Java%E5%B8%B8%E7%94%A8%E7%B1%BB%E5%BA%93.html">Java常用类库</a></li>
			
		</ul>
		<p>
			<!-- 多说评论框 start -->
			<div class="ds-thread" data-thread-key="element-ui固定表头" data-title="农东辉" data-url="/element-ui/2019/04/28/element-ui%E5%9B%BA%E5%AE%9A%E8%A1%A8%E5%A4%B4.html"></div>
			<!-- 多说评论框 end -->
			<!-- 多说公共JS代码 start (一个网页只需插入一次) -->
			<script type="text/javascript">
			var duoshuoQuery = {short_name:"nongdonghui"};
			(function() {
			var ds = document.createElement('script');
			ds.type = 'text/javascript';ds.async = true;
			ds.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') + '//static.duoshuo.com/embed.js';
			ds.charset = 'UTF-8';
			(document.getElementsByTagName('head')[0]
			|| document.getElementsByTagName('body')[0]).appendChild(ds);
			})();
			</script>
			<!-- 多说公共JS代码 end -->
		</p>
</div></li>",
			methods: {
				handleClick: function() {
					this.$emit('delete', this.index);
				}
			}
		});

		var v = new Vue({
			el: "#root",
			data: {
				inputValue: "",
				list: []
			},
			methods: {
				handleSubmit: function() {
					if (this.inputValue.trim() == "") {
						alert("请输入内容");
						return;
					}
					this.list.push(this.inputValue);
					this.inputValue = "";
				},
				handleDelete: function(index) {
					this.list.splice(index,1);
				}
			}
		});
	</script>
</body>
</html>

更新列表：

参考文章：