Vue 学习No.1

Vue学习笔记No.1

该系列只记录本人在菜鸟驿站学习Vue的过程中的笔记

附链接：https://www.runoob.com/vue2/vue-tutorial.html

---

Vue安装：

<!-- 最新版本 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script> 
<!-- 明确的版本号 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script> 

起步：

<!-- 每个vue应用都需要实例化 -->
<!-- div的id对应这vue的el -->
<div id="VueId">
	<!-- 调用方法为{{data里面的数据名或者methods里面的方法名}} -->
    <h1>site : {{site}}</h1>
    <h1>url : {{url}}</h1>
    <h1>{{details()}}</h1>
</div>
<script type="text/javascript">
    //实例化Vue
    var vm = new Vue({
        el: '#VueId',  //控件Id
        data: {
            site: "祈iy",
            url: "www.qiiy.com",
            alexa: "10000"
        },
        methods: {
            details: function() {
                return  this.site + " - 学的不仅是技术，更是梦想！";
            }
        }
    });
    //实例化vue后，我们可以根据实例化的对象获取一些数据，如：
    console.log(vm.$el); //返回vm的el;
    console.log(vm.$data); //返回vm的data;
    console.log(vm.site); //返回vm中data里的site;
    console.log(vm.details()); //调用methods里的details()方法;
</script>

模板语法

<!-- 此处是一个预设的class -->
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

<div id="VueId">

	<!-- 调用Vue中data里面的message写入到div的html中; -->
    <div v-html="message"></div>
    
    <!-- 调用Vue中methods里面的details()方法，将方法返回的数据写入到div的html中; -->
    <div v-html="details()"></div>
    
    <!-- v-model将获取到的input的value绑定到Vue中data里面的use (注意：数据是双向绑定) -->
    <label>修改颜色</label><input type="checkbox" v-model="use">
    <br><br>
    <!-- v-bind:class 将class属性绑定到div中，v-bind:class="{'class名': true或flase}" -->
    <div v-bind:class="{'class1': use}">看我的颜色</div>
    
    <!-- v-bind:id 将id绑定到div中， v-bind:id="id名"; -->
    <div v-bind:id="'list-' + site">菜鸟教程</div>
    
    <!-- v-if 判断指令 当use为true执行， template为模板不会生成控件 -->
    <template v-if="use">
        {{5+5}}<br> 
        {{ ok.split('').reverse().join('') }}
    </template>
    <!-- v-if 判断指令 当use为false执行， template为模板不会生成控件 -->
    <template v-else="use">
        {{ use ? 'YES' : 'NO' }}<br>
    </template>
    
    <!-- 为a插入href属性 -->
	<a v-bind:href="ok">祈iy</a><br>
    
    <!-- 绑定一个点击监听事件， 点击控件触发reverseMessage()方法 -->
    <button v-on:click="reverseMessage">反转字符串</button>
    
    <!-- 过滤器 执行filters里面的reverseMessage()方法，guollv为传递的数据 -->
    <p>{{guollv | reverseMessage}}</p>
</div>
	
<script>
new Vue({
  el: '#VueId',
  data: {
      message: "<h1>学的不仅是技术，更是梦想！</h1>",
      site: 'rouji',
      ok: 'false',
      use: false,
      guollv: 'fzhuan',
  },
  methods: {
            details: function() {
                return  "<h1>" + this.site + " - 学的不仅是技术，更是梦想！</h1>";
            },
            reverseMessage: function () {
                this.guollv= this.guollv.split('').reverse().join('');
            },
  },
  filters: {
    		reverseMessage: function (value) {
                return value.split('').reverse().join('');
            },
  }
	
});
</script>

v-bind 与 v-on 的 缩写

<!-- 此处是一个预设的class -->
<style>
.class1{
  background: #444;
  color: #eee;
}
</style>

<div id="VueId">
	<!-- 完整语法 -->
	<a v-bind:href="url">完整href链接</a><br>
	<a v-bind:class="{'class1': ok}">完整class样式</a><br>
	<!-- 缩写 -->
	<a :href="guollv">缩写href链接</a><br>
	<a :class="{'class1': ok}">缩写class样式</a><br>

	<!-- 完整语法 -->
	<button  v-on:click="reverseMessage">完整点击按钮</button><br>
	<!-- 缩写 -->
	<button  @click="reverseMessage">缩写点击按钮</button>
</div>
	
<script>
	new Vue({
  		el: '#VueId',
  		data: {
      		url: "www.runoob.com",
      		ok: false,
      		guollv: 'fzhuan',
  		},
  		methods: {
            reverseMessage: function () {
                this.ok= !this.ok;
            },
  		},
	});
</script>

OK！ 第一篇日记到此结束

上述的代码都可直接复制使用。

附一个菜鸟驿站的在线代码编辑器：https://www.runoob.com/try/try.php?filename=vue2-hw