练习

teaching/jwl/课件/vue/ceshi/src/App.vue

@@ -0,0 +1,45 @@
+<template>
+  <div id="app">
+   <div>{{str}}</div>
+   <div v-html="str"></div>
+   name<input type="text" v-model="name">{{name}}
+    <div v-if="age>=18">欢迎光临</div>
+    <!-- <div v-else-if="sss"></div> -->
+     <div v-else>禁止进入</div>
+     <div v-for="(i,j) in arr" :key="j">
+       {{i}}{{j}}
+     </div>
+  </div>
+</template>
+
+<script>
+
+// v-on(@)绑定是事件  v-bind(:) 绑定属性
+// v-html  解析html    v-if  v-else  v-else-if 条件
+// 循环语句  v-for
+// npm 命令  npm run serve    
+export default {
+  name: 'App',
+  data(){
+    return{
+       str:"<p>罗小黑</p>",
+       name:"",
+       age:16,
+       arr:[1,2,3]
+    }
+   
+  },
+  methods:{
+
+  }
+}
+</script>
+
+<style>
+.text{
+  color:red
+}
+.text1{
+  color:blue;
+}
+</style>

teaching/jwl/课件/vue/ceshi/src/components/HelloWorld.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

teaching/jwl/课件/vue/ceshi/src/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(App),
+}).$mount('#app')